react-new-component-cli

Simple, customizable utility for adding new React / Next components to your project ✨

This project is a CLI tool that allows you to quickly scaffold new components. All of the necessary boilerplate will be generated automatically.

• ⌨️ Simple CLI interface for adding React components.
• ✨ Uses Prettier to stylistically match the existing project.
• 📝 Offers global config, which can be overridden on a project-by-project basis.
• 🌈 Colourful terminal output!

Quickstart

Install via NPM:

npm i -g react-new-component-cli

cd into your project's directory, and try creating a new component:

rnc MyShinyComponent

Your project will now have a new directory at src/ui/MyShinyComponent containing three files :

• MyShinyComponent.tsx
• MyShinyComponent.module.scss
• index.ts

These files will be formatted according to your Prettier configuration.

Configuration

Configuration can be done through 3 different ways:

• Creating a global .react-component-config.json in your home directory (~/.react-component-config.json).
• Creating a local .react-component-config.json in your project's root directory.
• Command-line arguments.

The resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.

Example JSON configuration file:

{
  "lang": "ts",
  "style": ".scss",
  "dir": "src/components"
}

API Reference

All components created will be functional components.

| Option | Shorthand | JSON config | Defaults | Description | | ------- | --------- | ---------------------- | -------------- | -------------------------------------------------------------------- | | --lang | -l | { "lang": <value> } | ts | Controls which language, JavaScript or TypeScript, should be used. | | --dir | -d | { "dir": <value> } | src/ui | Controls the desired directory for the created component | | --style | -s | { "style": <value> } | .module.scss | Controls the desired style file extension for the created component. |

More about style extension API

Available values:

• .module.scss or .module.css for CSS modules
• .scss or .css for classic styles file
• none if you don't want any style file included.

Examples

# (defaults)
# Creates Tile.tsx, index.ts and tile.module.scss file in app/ui directory
rnc Tile

# Creates Tile.jsx, index.js and Tile.css file in src/components directory
rnc Tile -s .css -d src/components -l js

# Creates Tile.tsx, index.ts in src/components directory
rnc Tile -s none -d src/components

Platform Support

This utility has only been tested in MacOS environment.

Development

To get started with development:

• Fork and clone the Git repo
• cd into the directory and install dependencies (npm install)
• Set up a symlink by running npm link, while in the react-new-component-cli directory. This will ensure that the rnc command uses this locally-cloned project, rather than the global NPM installation.
• Spin up a test React project.
• In that test project, use the rnc command to create components and test that your changes are working.

Special thanks

Special thanks to ✨ Josh W. Comeau ✨, this utility's base is a fork from his repository.