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]

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

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