new-react-comp v1.0.2

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: