Have ideas to improve npm?Join in the discussion! »

    @2ui/create-react-component

    5.2.0 • Public • Published

    Generate React CLI

    dependencies License

    Why?

    To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.

    A few notes:

    • Now supports custom component types (read more). 🎉
    • Now supports custom component templates (read more). 🎉
    • Supports React TypeScript projects.
    • Supports two different component testing libraries - Testing Library and Enzyme - that work with Jest. We assume that you have these libraries already configured in your React project.
    • It follows grouping by feature because we believe when you look at a component, you should see all of its corresponding files (i.e., stylesheet, test, and component) under one folder with the feature name. We feel this approach provides a better developer experience.

    You can run it using npx like this:

      npx generate-react-cli component Box
    

    (npx is a package runner tool that comes with npm 5.2+)

    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).

    Example of the generate-react-cli.json config file:

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

    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.

    Example of the component files structure:

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

    Options

    You can also override some of the GRC component config rules using one-off commands. So for example, let's say you have set withTest to be true in the component.default property. You can override it like this:

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

    Or vice versa, if you have set withTest to be false you can do this:

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

    Otherwise, if you don't pass any options, it will just use the default values that you have set in the GRC config file under component.default.

    Options Description Value Type Default Value
    --path Value of the path where you want the component to be generated in (e.g. src/components). String component.default.path
    --type You can pass a custom component type that you have configured in the GRC config file that has its own set of component config rules. Read more about custom component types. String component.default
    --withLazy Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting) with this component. Boolean component.default.withLazy
    --withStory Creates a corresponding (storybook) story file with this component. Boolean component.default.withStory
    --withStyle Creates a corresponding stylesheet file with this component. Boolean component.default.withStyle
    --withTest Creates a corresponding test file with this component. Boolean component.default.withTest

    Custom component types:

    By default, GRC will use the component.default configuration rules when running the component command out of the box.

    What if you wanted to generate other types of components that have their own set of config rules (e.g., page or layout)?

    You can do so by extending the generate-react-cli.json config file like this.

    {
      "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
        }
      }
    }

    Now you can generate a component with your custom component types like this:

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

    You can also pass the same options to your custom component types as you would for the default component type.

    Custom component templates

    You can also create your own custom templates that GRC can use instead of the built-in templates that come with it. We hope this will provide more flexibility for your components that you want to generate.

    There is an optional customTemplates object that you can pass to the component.default or any of your custom component types within your generate-react-cli.json config file.

    Example of the customTemplates object:

    "customTemplates"{
      "component": "templates/component.js",
      "lazy":  "templates/lazy.js",
      "story":  "templates/story.js",
      "style": "templates/style.scss",
      "test":  "templates/test.js"
    },

    The keys represent the type of template, and the values are the paths that point to where your custom template lives in your project/system.

    Example of using the customTemplates object within your generate-react-cli.json config file:

    {
      "usesTypeScript": false,
      "usesCssModule": true,
      "cssPreprocessor": "scss",
      "testLibrary": "Testing Library",
      "component": {
        "default": {
          "customTemplates": {
            "component": "templates/component/component.js",
            "style": "templates/component/style.scss",
            "test": "templates/component/test.js"
          },
          "path": "src/components",
          "withStyle": true,
          "withTest": true,
          "withStory": true,
          "withLazy": false
        },
        "page": {
          "customTemplates": {
            "test": "templates/page/test.js"
          },
          "path": "src/pages",
          "withLazy": true,
          "withStory": false,
          "withStyle": true,
          "withTest": true
        }
      }
    }

    Notice in the page.customTemplates that we only specified the test custom template type. That's because all the custom template types are optional. If you don't set the other types, GRC will default to using the built-in templates it comes with.

    Example of a custom component template file:

    // templates/component/component.js
     
    import React from 'react';
    import styles from './TemplateName.module.css';
     
    const TemplateName = () => (
      <div className={styles.TemplateName} data-testid="TemplateName">
        <h1>TemplateName component</h1>
      </div>
    );
     
    export default TemplateName;

    Important - Make sure to use the TemplateName keyword in your templates. GRC will use this keyword to replace it with your component name.

    Example of a custom test template file:

    // templates/component/test.js
     
    import React from 'react';
    import ReactDOM from 'react-dom';
    import TemplateName from './TemplateName';
     
    it('It should mount', () => {
      const div = document.createElement('div');
      ReactDOM.render(<TemplateName />, div);
      ReactDOM.unmountComponentAtNode(div);
    });

    License

    Generate React CLI is open source software licensed as MIT.

    Install

    npm i @2ui/create-react-component

    DownloadsWeekly Downloads

    1

    Version

    5.2.0

    License

    MIT

    Unpacked Size

    46.2 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar