Wondering what’s next for npm?Check out our public roadmap! »

    reactjs-component-generator

    1.3.7 • Public • Published

    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

    Install

    npm i reactjs-component-generator

    DownloadsWeekly Downloads

    92

    Version

    1.3.7

    License

    MIT

    Unpacked Size

    72.8 kB

    Total Files

    96

    Last publish

    Collaborators

    • avatar