3.1.1 • Published 3 years ago
gnrc v3.1.1
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.cssExample 2
src folder does not exist
gnrc ./components/MyComponent -c --no-folder -s sass --no-module
.
+-- components
| +-- MyComponent.js //class component
| +-- MyComponent.sassChanging 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
}