Generate New React Component (gnrc)

Save your time and generate your react components in a simple and fast way.

3.0.0 - New configuration feature. Set your default component generation preferences such as styles language, index file, styles modules, etc.

Installation

npm i -g gnrc

Command

gnrc {<path> | <component name>} [{-f | -c}] [-i] [{--no-folder | --folder}] [{-s [<language>] | --no-styles}] [{-m | --no-module}] [--state] [--effect]

If only component name is specified instead of path:

• Case src folder exists: The component will be created in components folder inside of src folder
• Case src folder does not exist: The component will be created in components folder

Options table

Flag	Description
-f	The new component will be a functional component
-c	The new component will be a class component
--config	Shows default configuration for components creation
--config <options>	Overwrites the default configuration for components creation
-i	Generates an extra index file which will export the new component
-s <language>, --styles <language>	Generates a styles sheet file. If no laguange is specified, a css file will be generated
--no-styles	Avoids creation of styles file
-h, --help	Shows usage
--folder	The component will have it's own folder
--no-folder	The componet will not have it's own folder
--state	Imports useState hook when component is functional
--effect	Imports useEffect hook when component is functional
--module	Styles file will be a module
--no-module	Styles file will not be a module
-v, --version	Shows current gnrc version

Config options table

Flag	Description
--component-type <type>, --type <type>, -t <type>	Default type of component (function or class)
-s <boolean>, --styles <boolean>	Styles file should be created? (true or false)
--styles-language <language>	Default styles language
--module <boolean>, -m <boolean>	Styles files should be modules? (true or false)
--folder <boolean>	Folder should be created for new components? (true or false)
-i <boolean>, --index <boolean>	Index file should be created? (true or false)

Supported styles languages

• css
• scss
• sass
• less

Component generation examples

Example 1

src folder exist

gnrc myComponent -i -s

.
+-- src
    +-- components
|       +-- myComponent
|           +-- myComponent.js //functional component
|           +-- index.js
|           +-- myComponent.module.css

Example 2

src folder does not exist

gnrc ./components/MyComponent -c --no-folder -s sass --no-module

.
+-- components
|    +-- MyComponent.js //class component
|    +-- MyComponent.sass

Changing default configuration example

gnrc --config -m false --type class //set configuration to "no styles modules" and "class components"
gnrc --config //show current configuration
[ gnrc ] :    {
 componentType: "class",
 styles: false,
 stylesLanguage: "css",
 stylesModule: false,
 componentFolder: true,
 createIndex: false
}