new-react-comp

Simple tool for faster react component generation. Only works with functional components and hooks (there is an option for react-redux hooks).

Simple example:

new-react-comp ExampleComponent

Will create .js file in current working directory with folowing code:

import React from 'react';

const ExampleComponent = () => {
  return(
    <div>
    </div>
    )
};

export default ExampleComponent;

Installation:

npm install -g new-react-comp

Options:

Specific path

Path for a component generation can be specified. Command will also generate any missing directory. For example:

new-react-comp client/src/components/ExampleComponent

Generation inside directory

There is an option to generate .js file inside a new directory with the same name as the component. Example:

new-react-comp components/ExampleComponent -f

Stylesheet generation

.css or .scss files can be generated as well in the same directory as the .js file and with the same name. Stylesheet file would be automatically imported into component. Example:

new-react-comp components/ExampleComponent --scss

import React from 'react';
import './ExampleComponent.scss';

const ExampleComponent = () => {
  return(
    <div>
    </div>
    )
};

export default ExampleComponent;

Import hooks

React hooks:

new-react-comp components/ExampleComponent --effect --state

or

new-react-comp components/ExampleComponent -es

import React,  { useEffect, useState} from 'react';

const ExampleComponent = () => {
  const [state, setState] = useState('');

  return(
    <div>
    </div>
    )
  };

export default ExampleComponent;

React-redux hooks:

new-react-comp components/ExampleComponent --selector --dispatch

or

new-react-comp components/ExampleComponent -ld

import React from 'react';
import { useDispatch, useSelector} from 'react-redux';

const ExampleComponent = () => {
  const dispatch = useDispatch();

  const s = useSelector(state => state);

  return(
    <div>
    </div>
    )
  };

export default ExampleComponent;

All options:

Short version	Long version	Description
-f	--folder	Specifies if component has to be contained inside the folder
-s	--state	Imports useState hook from 'react' library
-e	--effect	Imports useEffect hook from 'react' library
-d	--dispatch	Imports useDispatch hook from 'react-redux'
-l	--selector	Imports useSelector hook from 'react-redux'
-p	--props	Specifies if component has to take props as an argument
none	--css	Creates .css file with the same name as the component and imports it in
none	--scss	Same as --css option, but will create .scss file. Only one of the stylesheet options can be used