react-ch-cli 💻

react-ch-cli is a program for creating components and hooks.

Requirements

• Node.js 16
• npm 5.2+

Table of Contents

• Config file
• Generate components
• Generate hooks

Quickstart

Install via NPM:

  npm i react-ch-cli --save-dev

If you install globally, add rcliconfig.json to .gitignore.

  npm i -g react-ch-cli

Execution

You can run it using npx

  npx rgenerate component Avatar

Globally

  rgenerate component Avatar

Config file

When first run in the project. It will look for the rcliconfig.json configuration file. If it does not find it, it will ask you a series of questions and will generate said configuration file in the root of the project.

Example of the rcliconfig.json config file:

  {
    "baseURL": "src",
    "usesTypeScript": true,
    "usesCSSModule": false,
    "cssPreprocessor": "none",
    "usesTests": true,
    "testingLibrary": "Testing Library"
  }

• baseURL: (String) Default src.

• usesTypeScript: (Boolean) Default true. The components and hooks will be generated in tsx and ts format respectively.

• usesCSSModule: (Boolean) Default true. Generates the CSS Module file.

• cssPreprocessor: (String) Default scss. Values: scss, sass, and none.

• usesTests: (Boolean) Default true. Indicates whether to generate the test file.

• testingLibrary: (String) Default Testing Library.

You can modify the configuration file through the following options:

npx rgenerate config [options]

Options	Description	Values Type	Default Value
--changeURL	Change the baseURL value of the configuration file.	String
--changeLang	Modifies if the files are generated in JS or TS. Values: js, ts.	String
--useCSSModules	Style sheets are generated in CSS Modules.	Boolean	True
--no-useCSSModules	Style sheets are generated in CSS.	Boolean	False
--changeCSSPreprocessor	Change the CSS preprocessor to use. Values: scss, sass, none.	String
--useTest	Habilita la creación de archivo de prueba.	Boolean	True
--no-useTest	Deshabilita la creación de archivo de prueba.	Boolean	False

Generate Components

  npx rgenerate component Avatar

This command will create a folder with the name of the component inside the default src/components directory and its corresponding files.

Component files structure

|-- /src
    |-- /components
        |-- /Avatar
            |-- index.jsx
            |-- Avatar.css

To generate a component in another folder you must write the name of the folder and the component joined by "/". For example:

  npx rgenerate component pages/Home

|-- /pages
    |-- /components
        |-- /Avatar
            |-- index.jsx
            |-- Avatar.css

Options	Description	Values Type	Default Value
--fileName	Generate a <name>.jsx|tsx file instead of index.	String	index
--noStyles	It will not generate the component's stylesheet.	Boolean	False
--noTest	It will not generate the test file of the component.	Boolean	False

Generate Hooks

  npx rgenerate hook useHook

This command will create a file with the name of the hook in the hooks folder. If the folder does not exist it will create it in the process.

|-- /src
    |-- /hooks
        | -- useHook.js