Repository files navigation

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 shortarticle goes deeper into why we created GRC if you have the time.

You can also watch an excellentvideo tutorial on how to use GRC byEric Murphy.

• Config file
• Generate components
• Custom component types
• Custom component templates
• Custom component directory
• Custom component files

  npx generate-react-cli component Box

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

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

  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

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

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

Or vice versa, if you have setwithTest to befalse 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 undercomponent.default.

By default, GRC will use thecomponent.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 orlayout)?

You can do so by extending thegenerate-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 sameoptions to your custom component types as you would for the default component type.

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 optionalcustomTemplates object that you can pass to thecomponent.default or any of your custom component types within yourgenerate-react-cli.json config file.

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

The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note theTemplateName keyword in the template filename. GRC will use this keyword and replace it with your component name (in whichever format you typed the component name in the command) as the filename.

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

Notice in thepage.customTemplates that we only specified thetest 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.

// templates/component/TemplateName.jsimportReactfrom'react';importstylesfrom'./TemplateName.module.css';constTemplateName=()=>(<divclassName={styles.TemplateName}data-testid="TemplateName"><h1>TemplateName component</h1></div>);exportdefaultTemplateName;

Important: You can use the following keywords within your custom templates to format the component name. Note that the built-in GRC templates usetemplatename casing by default:

// templates/component/TemplateName.test.jsimportReactfrom'react';importReactDOMfrom'react-dom';importTemplateNamefrom'./TemplateName';it('It should mount',()=>{constdiv=document.createElement('div');ReactDOM.render(<TemplateName/>,div);ReactDOM.unmountComponentAtNode(div);});

Using thecustomDirectory you can easily override the directory name for the component generated. For instance, if prefixes are required for particular components or if template names will be mixed, thecustomDirectory option will allow you to override the way that GRC generates the name of the directory where the component files will live.

ThecustomDirectory directive allows all supported casings (see previous section) and can be overridden at the following levels in ascending specific of priority:

• top
• component.default
• component.type
• CLI

For React Context Providers in a project, the decision has been made to separate Context generation from the visual components.

In a typical configuration the configuration would look as following:

{"provider": {"path":"src/components/providers","withLazy":false,"withStory":true,"withStyle":false,"withTest":true,"withTypes":true,"withContext":true,"customTemplates": {"component":"src/components/templates/provider/TemplateName.tsx","context":"src/components/templates/provider/TemplateName.context.ts","story":"src/components/templates/provider/TemplateName.stories.tsx","test":"src/components/templates/provider/TemplateName.test.tsx","types":"src/components/templates/provider/TemplateName.types.ts"    }  }}

With the configuration above, the component would be required to either follow a full or a minimalistic naming convention.I.e. the component would either need to be generated asThemeProvider and consequently the context name would be generated asThemeProviderContext, or by renaming the files and templates asTemplateNameProvider but with the downside of the component path being generated assrc/components/providers/Theme. This creates inconsistent naming in the directory containg the component files.

To work around this, thecustomDirectory option can be used to enforce a particular style.

{..."provider": {"path":"src/components/providers","withLazy":false,"withStory":true,"withStyle":false,"withTest":true,"withTypes":true,"withContext":true,"customDirectory":"TemplateNameProvider","customTemplates": {"component":"src/components/templates/provider/TemplateNameProvider.tsx","context":"src/components/templates/provider/TemplateName.context.ts","story":"src/components/templates/provider/TemplateNameProvider.stories.tsx","test":"src/components/templates/provider/TemplateNameProvider.test.tsx","types":"src/components/templates/provider/TemplateNameProvider.types.ts"      }  }...}

The above configuration would allow you to mix and match different template names and keep naming consistent.

If we executed GRC with the above configuration (npx generate-react-cli component Theme --type=provider), the result would look like this:

src/components/providers/ThemeProvider/Theme.context.tssrc/components/providers/ThemeProvider/ThemeProvider.tsxsrc/components/providers/ThemeProvider/ThemeProvider.stories.tsxsrc/components/providers/ThemeProvider/ThemeProvider.test.tsxsrc/components/providers/ThemeProvider/ThemeProvider.types.ts

Similarly, this construct could be used as a shortcut for generating other named components, like theBoxLayout example above, depending on that could be shortened to:

  npx generate-react-cli component Box --type=layout --customDir=TemplateNameLayout

Or it could be used to generate files with a naming convention withTest,Lazy,Context,Theme, orProvider suffixes. Or even combined with skeleton CSS

GRC comes with corresponding built-in files for a given component if you need them (i.e.,withStyle,withTest,withStory, andwithLazy).

What if you wanted to add custom files of your own?

For example, let's say you wanted to add anindex.js file for each component, so you don't have to add the additional component name with each import (i.e.,import Box from './components/Box' instead ofimport Box from './components/Box/Box').

Or maybe you need an additional style file for your component stories.

You can do so by editing yourgenerate-react-cli.json config file like so.

{"usesTypeScript":false,"usesCssModule":false,"cssPreprocessor":"css","testLibrary":"Testing Library","component": {"default": {"path":"src/components","withStyle":true,"withTest":true,"withStory":true,"withLazy":false,"withIndex":true,"withStoryStyle":true,"customTemplates": {"index":"templates/default/index.js","storyStyle":"templates/default/TemplateName.stories.css"      }    }  }}

// templates/default/index.jsexport{default}from'./TemplateName';

/* templates/default/TemplateName.stories.css */.TemplateName {}

In this case, we added awithIndex &withStoryStyle to thecomponent.default. Note: You can add custom files to any of your custom component types.

You should also see that we addedindex andstoryStyle to ourcustomTemplates object. That's because custom files require custom templates. Otherwise, you will get an error when you generate a component.

Also, we used theTemplateName keyword for thestoryStyle custom file. GRC will generate this corresponding file and replaceTemplateName with the component name.

Generate React CLI is an open source softwarelicensed as MIT.