@sasa_djuric/react-cli NPM

Short description

Motivation

Examples

react create component button

rct c c text-input

react-cli c c container header

npx react-cli c h useInput

Installation

For NPM

npm install -g react-cli

For Yarn

yarn global add -g react-cli

Usage

react init

Generates a configuration file based on the prompt

react create component

Arguments

Argument	Description
type	Type of component defined in the configuration file
\	Name for the component. If you want to make a sub-component for an existing component, you can input a name like this: existing-component-name/new-component-name

Options

Option	Alias	Description
--class	-c	Create a class component
--typescript	-tp	Use typescript
--style	-s	Create a style file
--story	N/A	Create a story file
--proptypes	-p	Include proptypes
--redux	-r	Include redux
--test	-t	Create a test file
--index	-i	Create an index file with default export
--file-name \	-fn	Specify the file name. If this argument is provided, the file naming config will be ignored
--path \	N/A	Specify the path for the file relative to the project source path defined in the project configuration entry
--no-typescript	-notp	Don't use typescript
--no-style	-nos	Don't create a style file
--no-story	N/A	Don't create story book file
--no-proptypes	-nop	Don't include proptypes
--no-redux	-nor	Don't include redux
--no-test	-not	Don't create a test file
--no-index	-noi	Don't create an index file

react create hook

Arguments

Argument	Description
\	Name for hook

Options

Option	Alias	Description
--typescript	-t	Use typescript
--no-typescript	-notp	Don't use typescript
--path \	N/A	Specify the path for the file relative to the project source path defined in the project configuration entry

Configuration

Scope	Type
project	ProjectConfig
component	ComponentConfig
style	StyleConfig
storybook	StorybookConfig
test	TestConfig
hook	HookConfig

ProjectConfig

Option	Type	Description
path	string	Project source path
typescript	boolean	Uses typescript
fileNaming	FileNaming	Define file naming

ComponentConfig

Option	Type	Description
class	boolean	Create a class component
style	boolean	Create a style file
story	boolean	Create a story file
proptypes	boolean	Include proptypes
redux	boolean	Include redux
test	boolean	Create a test file
testId	boolean	Adds data-testid attribute on the element
index	boolean	Create an index file
open	boolean	Open file in default editor after creating
path	string	Specify the path for the file relative to the project source path defined in the project configuration entry
typescript	boolean	Use typescript
inFolder	boolean	Save the file in its own folder
fileNaming	FileNaming	Define file naming
override	ComponentOverrideConfig	Override configuration of style, storybook, or test

ComponentOverrideConfig

Option	Type
style	StyleConfig
storybook	StorybookConfig
test	TestConfig

StyleConfig

Option	Type	Description
type	css \| scss \| sass \| less \| styled-components	Type of styling technology
modules	boolean	Use css modules
path	string	Specify the path for the file relative to the project source path defined in the project configuration entry
typescript	boolean	Use typescript (for css in js solutions)
inFolder	boolean	Save the file in its own folder
fileNaming	FileNaming	Define file naming

StorybookConfig

Option	Type	Description
path	string	Specify the path for the file relative to the project source path defined in the project configuration entry
typescript	boolean	Use typescript
inFolder	boolean	Save the file in its own folder
fileNaming	FileNaming	Define file naming

TestConfig

Option	Type	Description
path	string	Specify the path for the file relative to the project source path defined in the project configuration entry
typescript	boolean	Use typescript
inFolder	boolean	Save the file in its own folder
fileNaming	FileNaming	Define file naming

HookConfig

Option	Type	Description
open	boolean	Open file in default editor after creating
path	string	Specify the path for the file relative to the project source path defined in the project configuration entry
typescript	boolean	Use typescript
inFolder	boolean	Save the file in its own folder
fileNaming	FileNaming	Define file naming

FileNaming

Option	Type	Description
name	string	Specify name or naming type
postfix	string	Define postfix or postfix type for file name
postfixDevider	string	Define postfix devider
casing	camel \| pascal \| kebab \| snake	Specify casing type

Name types

Component

Type	Description
{name}	Provided component name

Style

Type	Description
{name}	Provided name

Story

Type	Description
{name}	Provided name

Test

Type	Description
{name}	Provided name

Postfix types

Component

Type	Description
{type}	Value is compnent
{componentType}	Specified type argument

Style

Type	Description
{type}	Value is style
{componentType}	Specified component type argument

Example

{
    "project": {
        "path": "./src",
        "typescript": true,
        "fileNaming": {
            "casing": "kebab",
            "postfix": "",
            "postfixDevider": "."
        }
    },
    "component": {
        "default": {
            "style": true,
            "story": true,
            "test": true,
            "proptypes": true,
            "index": true,
            "inFolder": true,
            "open": true,
            "fileNaming": {
                "casing": "camel"
            },
            "path": "/components",
            "class": false,
            "redux": false,
            "override": {
                "style": {
                    "type": "scss"
                }
            }
        },
        "container": {
            "style": true,
            "story": false,
            "test": true,
            "proptypes": true,
            "index": true,
            "inFolder": true,
            "open": true,
            "path": "/containers"
        }
    },
    "style": {
        "type": "styled-components",
        "modules": false,
        "path": "{componentPath}"
    },
    "storybook": {
        "path": "{componentPath}",
        "fileNaming": {
            "postfix": "story"
        }
    },
    "test": {
        "path": "../test",
        "fileNaming": {
            "postfix": "test"
        }
    },
    "hook": {
        "open": true,
        "path": "/hooks"
    }
}

License

MIT

react cli

case chalk clear commander indent.js inquirer lodash

1.0.0

5 years ago