Karabo-Seipelo / schematics-react

Schematics generators for React with Nextjs in mind

Schematics React

Schematics generators for React 🎊

Features

• 📜 Generates boilerplate
• 🎛️ Configurable
• 🛠️ Supports JavaScript & TypeScirpt
• 📦 Works with create-react-app
• 📌 Follows best pratices

Installation

• npm:

  npm install -g @angular-devkit/schematics-cli
  npm install --save-dev schematics-react

• yarn:

  yarn global add @angular-devkit/schematics-cli
  yarn add -D schematics-react

Usage

schematics schematics-react:<generator name> <arguments>

Available generators

Component

Creates a React component.

Example:

schematics schematics-react:component /src/components/myComponent

with alias:

schematics schematics-react:c /src/components/myComponent

Parameters

Type	Name	Description	Default
required {string}	name	The name of the component.	none
{string}	path	The path to create the component	none
{string}	styleext	The file extension to be used for style files	'css'
{boolean}	noSpec	Specifies if a spec file is generated	false
{boolean}	subfolder	Flag to indicate if a dir is created	false
{boolean}	propTypes	Specifies if a propTypes used	false
{boolean}	stateful	Specifies if a state used	false
{boolean}	ts	Specifies whether to use TypeScript	false

Functional component

Creates a React component.

Example:

schematics schematics-react:functional-component /src/components/myComponent

with alias:

schematics schematics-react:fc /src/components/myComponent

Parameters

Type	Name	Description	Default
required {string}	name	The name of the component.	none
{string}	path	The path to create the component	none
{string}	styleext	The file extension to be used for style files	'css'
{boolean}	noSpec	Specifies if a spec file is generated	false
{boolean}	subfolder	Flag to indicate if a dir is created	false
{boolean}	propTypes	Specifies if a propTypes used	false
{boolean}	ts	Specifies whether to use TypeScript	false