reactjs-component-generator

react-component-generator

A CLI generator for React components, pages, styled-components and redux store, HTTP services, redux-box store, redux module.

Install

$ npm install -g reactjs-component-generator

Usage

The most basic command runs a wizard to create a component.

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

$ rg functional-component <name>

class component

Directly create a class component based on the current settings.

$ rg component <name>

Typescript component

Directly create a component with typeScript config based on the current settings.

$ rg tscomponent <name>

The generated file will be *filename.ts *filename.scss

Page [Recommended for Next.js]

Directly create a page based on the current settings.

$ rg page <name>

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 <destination>: Override the destination for component.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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:

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

$ rg tspage <name>

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.

$ rg-styled <name>

Arguments:

• name: The name you want to use for the component.

Options:

• -d, --destination <destination>: Override the destination for component.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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:

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

$ rg redux <name>

Arguments:

name: The name doen't have any impact here but required. Options:

• -d, --destination <destination>: Override the destination for store.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg redux-module <name>

Arguments:

name: The name doesn't have any impact here but required. Options:

• -d, --destination <destination>: Override the destination for store module.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg route

services

Directly create a services based on the current settings.

$ rg services <name>

Arguments:

name: The name doen't have any impact here but required. Options:

• -d, --destination <destination>: Override the destination for services.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg service-module <name>

Arguments:

name: The name you want to use for the service module. Options:

• -d, --destination <destination>: Override the destination for service module.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg config <name>

Arguments:

name: The name you want to use for the config. Options:

• -d, --destination <destination>: Override the destination for config.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg request <name>

Arguments:

name: The name you want to use for the request module. Options:

• -d, --destination <destination>: Override the destination for request module.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg storage <name>

Arguments:

name: The name you want to use for the storage module. Options:

• -d, --destination <destination>: Override the destination for storage module.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg setup <name>

Arguments:

name: The name is required but doesn't have any impact. Options:

• -d, --destination <destination>: Override the destination for setup.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg store <name>

Arguments:

name: The name you want to use for the store module. Options:

• -d, --destination <destination>: Override the destination for store module.
• -p, --template-path <template-path>: Override template path.
• -t, --template <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.

$ rg settings

Options:

• -v, --view-destination <destination>: Set default view destination.
• -c, --component-destination <destination>: Set default component destination.
• -s, --store-destination <destination>: Set default store destination.
• -t, --template-path <template-path>: Set template path.
• -l, --log: Log global or local settings depending on the global flag.
• -g, --global: Set global settings.

Examples:

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

$ rg reset

show-templates

Open the default template directory. The default templates can be edited to fit your needs.

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

$ rg copy-templates