Generate React CLI

A CLI tool to speed up productivity in React projects by generating components instantly with configurable templates.

Table of Contents

• Quick Start
• Requirements
• Config File
• Generate Components
• Options
• Custom Component Types
• Custom Component Templates
• Template Keywords
• Custom Component Files
• Advanced: Custom Directory
• License

Quick Start

# Generate your first component (creates config on first run)
npx generate-react-cli component Box

# Or install globally
npm i -g generate-react-cli
generate-react component Button

Requirements

• Node.js 22 or higher
• npm 10 or higher

Config File

When you run GRC within your project the first time, it will ask you a series of questions to customize the CLI for your project needs (this will create a generate-react-cli.json config file).

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "path": "src/components",
      "withLazy": false,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    }
  }
}

Test library options:

| Option | Description | |--------|-------------| | Testing Library | Uses React Testing Library | | Vitest | Uses Vitest with React Testing Library | | None | Basic tests using React's createRoot API |

Generate Components

npx generate-react-cli component Box

This command will create a folder with your component name within your default (e.g., src/components) directory, and its corresponding files.

|-- /src
    |-- /components
        |-- /Box
            |-- Box.js
            |-- Box.css
            |-- Box.test.js

Options

You can override config rules using command-line options:

npx generate-react-cli component Box --withTest=false

| Option | Description | Default | |--------|-------------|---------| | --path | Output directory for the component | Config value | | --type | Custom component type to use | default | | --withLazy | Generate a lazy-loading wrapper file | Config value | | --withStory | Generate a Storybook story file | Config value | | --withStyle | Generate a stylesheet file | Config value | | --withTest | Generate a test file | Config value | | --dry-run | Preview what will be generated without writing files | false | | --flat | Generate files directly in path without creating a folder | false | | --customDirectory | Override the component's folder name (see below) | Component name |

Custom Component Types

By default, GRC uses the component.default configuration. You can define additional component types with their own rules:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "path": "src/components",
      "withLazy": false,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    },
    "page": {
      "path": "src/pages",
      "withLazy": true,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    },
    "layout": {
      "path": "src/layout",
      "withLazy": false,
      "withStory": false,
      "withStyle": false,
      "withTest": true
    }
  }
}

Generate components with custom types:

npx generate-react-cli component HomePage --type=page
npx generate-react-cli component Sidebar --type=layout

Custom Component Templates

Create your own templates that GRC uses instead of the built-in ones. Add a customTemplates object to any component type:

{
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "customTemplates": {
        "component": "templates/TemplateName.js",
        "style": "templates/TemplateName.module.css",
        "test": "templates/TemplateName.test.js"
      }
    }
  }
}

Example custom component template:

// templates/TemplateName.js

import styles from './TemplateName.module.css';

const TemplateName = () => (
  <div className={styles.TemplateName} data-testid="TemplateName">
    <h1>TemplateName component</h1>
  </div>
);

export default TemplateName;

Example custom test template:

// templates/TemplateName.test.js

import { createRoot } from 'react-dom/client';
import TemplateName from './TemplateName';

it('should mount', () => {
  const container = document.createElement('div');
  const root = createRoot(container);
  root.render(<TemplateName />);
  root.unmount();
});

All template types are optional. If you don't specify a custom template for a file type, GRC uses its built-in template.

Template Keywords

Use these keywords in your custom templates and filenames. GRC replaces them with the component name in various formats:

| Keyword | Output Format | Example (Box) | |---------|--------------|-----------------| | templatename | raw (as typed) | Box | | TemplateName | PascalCase | Box | | templateName | camelCase | box | | template-name | kebab-case | box | | template_name | snake_case | box | | TEMPLATE_NAME | UPPER_SNAKE | BOX | | TEMPLATENAME | UPPERCASE | BOX |

Custom Component Files

Add custom files beyond the built-in options (withStyle, withTest, withStory, withLazy).

Example: Adding an index.js barrel file for cleaner imports:

{
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withIndex": true,
      "customTemplates": {
        "index": "templates/index.js"
      }
    }
  }
}

// templates/index.js
export { default } from './TemplateName';

Custom files require corresponding custom templates in customTemplates.

Advanced: Custom Directory

Override the generated component's folder name using customDirectory. This is useful when you need naming conventions that differ from the component name.

Example: Generate a Theme provider where files live in a ThemeProvider folder:

{
  "component": {
    "provider": {
      "path": "src/providers",
      "withTest": true,
      "customDirectory": "TemplateNameProvider",
      "customTemplates": {
        "component": "templates/TemplateNameProvider.tsx"
      }
    }
  }
}

npx generate-react-cli component Theme --type=provider
# Creates: src/providers/ThemeProvider/ThemeProvider.tsx

You can also pass it as a CLI option:

npx generate-react-cli component Box --customDirectory=TemplateNameLayout

License

Generate React CLI is open source software licensed as MIT.