A CLI generator for react components, styled-components, pages, services and store modules
npm install reactjs-component-generatorA CLI generator for React components, pages, styled-components and redux store, HTTP services, redux-box store, redux module.
``console`
$ npm install -g reactjs-component-generator
The most basic command runs a wizard to create a component.
`console`
$ rg
Note: Names can be given in any format (slug-case, camelCase, PascalCase, UPPERCASE, lowercase etc.).
#### functional component
Directly create a functional component based on the current settings.
`console`
$ rg functional-component
#### class component
Directly create a class component based on the current settings.
`console`
$ rg component
#### Typescript component
Directly create a component with typeScript config based on the current settings.
`console`
$ rg tscomponent
The generated file will be
filename.ts filename.scss
#### Page [Recommended for Next.js]
Directly create a page based on the current settings.
`console`
$ rg page
The generated file will be
filename.js index.js *filename.scss
Arguments:
- name: The name you want to use for the component.
Options:
- -d, --destination : Override the destination for component.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'component' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a component. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.
Examples:
`console`
$ rg component check-box
$ rg component RadioButton -d ./components/ui
$ rg component videoPlayer -d ./src/components/players/ -t base-video-component -f
The generated file will be
filename.css index.js *filename.js
#### Typescript Page [Recommended for Next.js + typeScript]
Directly create a page with typeScript config based on the current settings.
`console`
$ rg tspage
The generated file will be
filename.ts index.ts *filename.scss
#### styled component
Directly create a component based on the current settings with styled component.
`console`
$ rg-styled
Arguments:
- name: The name you want to use for the component.
Options:
- -d, --destination : Override the destination for component.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'component' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a component. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.
Examples:
`console`
$ rg-styled check-box
$ rg-styled RadioButton -d ./my-component/ui
$ rg-styled videoPlayer -d ./src/my-component/players/ -t base-video-component -f
The generated file will be
filename.styled.js index.js *filename.js
#### redux [Recommended for redux]
Directly create a store based on the current settings.
`console`
$ rg redux
Arguments:
name: The name doen't have any impact here but required.
Options:
- -d, --destination : Override the destination for store.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'src' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a store. By default it's impossible to create a store if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.
Examples:
`
$ rg redux user
$ rg redux shopping-cart -d ./modules
$ rg redux Car -t complex-store
The generated file will be
`
$ user [Default module]
$ index.js [Container all the reducer]
#### redux module [Recommended for redux]
Directly create a store module based on the current settings.
`console`
$ rg redux-module
Arguments:
name: The name doesn't have any impact here but required.
Options:
- -d, --destination : Override the destination for store module.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'store' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a store module. By default it's impossible to create a store module if the destination path doesn't exist. This option forces the creation of a store module and will generates the destination folders if they don't exist.
Examples:
`
$ rg redux-module user
$ rg redux-module shopping-cart -d ./modules
$ rg redux-module Car -t complex-store
The generated file will be
- action.js [All actions related to module]
- mutations.js [All mutations related to module]
- reducer.js [All reducer related to module]
- state.js [All state variable related to module]
#### route [using react-router]
Directly create a react-router route setup.
`console`
$ rg route
#### services
Directly create a services based on the current settings.
`console`
$ rg services
Arguments:
name: The name doen't have any impact here but required.
Options:
- -d, --destination : Override the destination for services.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'src' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a services. By default it's impossible to create a services if the destination path doesn't exist. This option forces the creation of a services and will generates the destination folders if they don't exist.
Examples:
`
$ rg services user
$ rg services shopping-cart -d ./modules
$ rg services Car -t complex-store
The generated file will be
- config [folder contains http request method, local storage methods, and api url file]
- user.js [Defaul service for api call]
#### service module
Directly create a service module based on the current settings.
`console`
$ rg service-module
Arguments:
name: The name you want to use for the service module.
Options:
- -d, --destination : Override the destination for service module.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'src/services' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a service module. By default it's impossible to create a service module if the destination path doesn't exist. This option forces the creation of a service module and will generates the destination folders if they don't exist.
Examples:
`
$ rg service-module user
$ rg service-module shopping-cart -d ./modules
$ rg service-module Car -t complex-store
The generated file will be
- filename.js [contains api call request]
#### config [create a service configuration]
Directly create a service configuration based on the current settings.
`console`
$ rg config
Arguments:
name: The name you want to use for the config.
Options:
- -d, --destination : Override the destination for config.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'src/services' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a config. By default it's impossible to create a config if the destination path doesn't exist. This option forces the creation of a config and will generates the destination folders if they don't exist.
Examples:
`
$ rg config util
$ rg config shopping-cart -d ./modules
$ rg config Car -t complex-store
The generated file will be
- apiUrl.js [contains api url ]
- request.js [contains http request methods (get, post, put, delete, patch, update)]
- storage.js [contains methods for local storage]
#### request
Directly create a request module based on the current settings.
`console`
$ rg request
Arguments:
name: The name you want to use for the request module.
Options:
- -d, --destination : Override the destination for request module.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'src/services/config' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a config. By default it's impossible to create a request if the destination path doesn't exist. This option forces the creation of a request and will generates the destination folders if they don't exist.
Examples:
`
$ rg request apiRequest
$ rg request shopping-cart -d ./modules
$ rg request Car -t complex-store
The generated file will be
- filename.js [contains http request methods (get, post, put, delete, patch, update)]
#### storage
Directly create a storage module based on the current settings.
`console`
$ rg storage
Arguments:
name: The name you want to use for the storage module.
Options:
- -d, --destination : Override the destination for storage module.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'src/services/config' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a storage. By default it's impossible to create a storage if the destination path doesn't exist. This option forces the creation of a storage and will generates the destination folders if they don't exist.
Examples:
`
$ rg storage localStorage
$ rg storage shopping-cart -d ./modules
$ rg storage Car -t complex-store
The generated file will be
- storage.js [contains methods for local storage]
#### setup
Directly create a setup for store and services based on the current settings.
`console`
$ rg setup
Arguments:
name: The name is required but doesn't have any impact.
Options:
- -d, --destination : Override the destination for setup.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'src' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a setup. By default it's impossible to create a setup if the destination path doesn't exist. This option forces the creation of a setup and will generates the destination folders if they don't exist.
Examples:
`
$ rg setup text
$ rg setup shopping-cart -d ./modules
$ rg setup Car -t complex-store
This will generate the store and services module, the structure is mentioned above.
#### store [Recommended for redux-box]
Directly create a store module based on the current settings.
`console`
$ rg store
Arguments:
name: The name you want to use for the store module.
Options:
- -d, --destination : Override the destination for store module.-p, --template-path
- : Override template path.-t, --template
- : Override template type. By default it uses the 'store' folder from the template path. With this option you can use a different template folder.-f, --force
- : Force creation of a store. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.
Examples:
`
$ rg store user
$ rg store shopping-cart -d ./modules
$ rg store Car -t complex-store
Note:This store is specifically for Redux-box users.
Take a look at redux-box : https://www.npmjs.com/search?q=redux-box
The generated file will be
action.js index.js mutations.js sagas.js *state.js
#### settings
Set or display settings. Without any options it will display the settings. By default it will set the settings locally in a .reactgenerator file.
You can also set global settings by using the global option `-g --global`.
`console`
$ rg settings
Options:
* `-v, --view-destination `: Set default view destination.`
* -c, --component-destination `: Set default component destination.`
* -s, --store-destination `: Set default store destination.`
* -t, --template-path `: Set template path.`
* -l, --log`: Log global or local settings depending on the global flag.`
* -g, --global`: Set global settings.
Examples:
`console`
$ rg settings -l
$ rg settings -v ./view -c ./component -s ./store/modules -t ./template
$ rg settings -g -c ./components
#### reset
Reset global settings to the defaults.
`console`
$ rg reset
#### show-templates
Open the default template directory. The default templates can be edited to fit your needs.
`console`
$ rg show-templates
#### copy-templates
Copy the default templates to another directory. This is handy when you want to customize the default templates.
Don't forget to run `rg init` or set the template path with `rg settings`.
`console``
$ rg copy-templates