Updated to contain lifecycle methods from react 16.6.0+

Note This means UNSAFE methods are added by default.

Add React components from cli

• Supports JSX flavoured components

• Can make class (stateful) or stateless component

• Uses UMD (universal module syntax) for wider support

  Commands:

Installation

Add as a global

yarn add add-react -g

or

npm install add-react -g

or to add to current project only

yarn add add-react

To use:

add-react <command>

Commands

component | c;

Adds a new react component, this will walk you through a few steps to create the component example:

add-react component

or

add-react c

Options:

add-react supports two component types

Stateless (functional)

Stateless functional component only has 2 configuration options:

• Component name
• Filename

ES6 Class

Es6 class contain boilerplate code for stateful component extending react.component. Has 3 options:

• Component name
• Filename
• LifecycleMethods - if 'true' boilerplate contains all default react components.

Example Component:

const React = require("react");

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  static getDerivedStateFromProps(props, state) {
    return {};
  }

  UNSAFE_componentWillMount() {}

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps() {}

  shouldComponentUpdate() {}

  UNSAFE_componentWillUpdate() {}

  componentDidUpdate() {}

  componentWillUnmount() {}

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

module.exports = Navigation;

CLI only

If you prefer to just use a one liner and not go through the questions you can use the following:

add-react cli <componentType> <componentName> <filename> [lifecycle]

componentType

Class or Stateless

componentName;

Component Name

filename;

filename - e.g Component.jsx

lifecycle;

boolean - whether class (stateful) component should contain all lifecycle methods

Options

-V, --version output the version number

-h, --help output usage information