React-new-component-cli NPM

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.