React create component interactive CLI

CLI to create or edit React or React Native components with your own structure

• Plug and play: Instant config for CRA with typescript
• Easy to config: interactive configuration and simple templating
• Works with anything: Typescript, Storybook, Redux, Jest, ...
• Lightweight: < 30kb + 3 small libraries
• Fast search: very fast selecting place for new component by dynamic search
• A lot by one command: ton of files by multi-creation feature
• Created for React: better than plop, hygen or any scaffolding library, because it's for React
• Multiplatform: Works on MacOS, Windows, and Linux.
• ⭐ VSCode Extension ⭐
• ⭐ Webstorm integration ⭐

Quick Overview

Via yarn and interactive mode

$ yarn add -D reactcci
$ yarn rcci

or via npm and flags

$ npm i -D reactcci
$ npx rcci --name Header Body Footer --dest src/App

Installation

To install via npm:
npm install --save-dev reactcci

To install via yarn:
yarn add --dev reactcci

Config

On first run CLI will ask you about automatic configuration. Just run a command:
npx rcci
This command creates file rcci.config.js and template folder with basic template set.

Config file contains next parameters:

• folderPath
  Root directory to place you components, or array of paths
  Default: src/

• templatesFolder
  Path to your own components templates
  Default: templates

• multiProject
  Allows you to set up config for mono-repository with several projects
  Default: false

• skipFinalStep
  Allows you to switch off last checking step
  Default: false

• templates
  Object with structure of your component

• processFileAndFolderName
  String or function which allows you to remap your component name to folder-name and file-name prefix
  Default: PascalCase
  Types:

  • camelCase
  • PascalCase
  • snake_case
  • dash-case
  • (name: string, parts: string[], isFolder: boolean) => string

  Example:

  {
      ...config,
      processFileAndFolderName: (name, parts, isFolder) => 
          isFolder ? name : parts.map((part) => part.toLowerCase()).join('-')
  }

• placeholders
  List of placeholders which you can use to build your own component template
  Default:
  #NAME# for a component name
  #STYLE# for css-module import
  #STORY_PATH# for storybook title

• afterCreation
  Object with scripts to process you file after creation
  Default: undefined
  Example:

  {
      ...config,
      afterCreation: {                
          prettier: {
              extensions: ['.ts', '.tsx'], // optional
              cmd: 'prettier --write [filepath]'
          }
      }
  }

Placeholders

Each placeholder is a function which get some data to build your own placeholder.
During the multiple component creation all functions will be called for every single component.
Example:

placeholders: {
    NAME: ({ componentName }) => componentName
}

After this set up you are able to use this placeholder by #NAME# inside your template files.
Below, you can see the list of all available data and functions to create a new one.

Arguments

• --update, -u
  To activate update mode to add new files to component or to replace existing
• --dest, -d
  To set absolute or destination path to create or update component
• --skip-search, -s
  To skip interactive folder selection to use dest argument as is
• --name, -n
  To set component name or names divided by space to create several
• --files, -f
  To set files to create or update, instead interactive selection
  Example: --files style test component[1]
  Will create optional files like style and test and will select second type of component by index
• --project, -p
  To set project in multi-project mode
• --sls
  To skip last agreement step like skipFinalStep in config file

Multi-template

If you need to generate something else, not components only, you are able to set up array of templates.
Example bellow:

{
    ...config,
    templates: [
        {
            name: 'component', // will be added to default folderPath folder
            files: {
                index: {
                    name: 'index.ts',
                    file: 'component.ts'
                }
            }
        },
        {
            name: 'service',
            folderPath: 'services/', // will be added by the specific path
            files: {
                index: {
                    name: 'index.ts',
                    file: 'service.ts'
                }
            }
        }
    ]
}

License