react-create-helper

1.1.0 • Public • Published

react-create-helper

CLI tool to help with creating components, reducers and actions.

Features

Create react-* with predefined templates
  • Components
  • Redux actions
  • Redux reducers

Install

npm i -g react-create-helper

Options

Add new string to package.json with name "react-create-helper"

  • base (string) - Base dir for components, actions, and reducers. Default - project root (./)
  • actionsDir (string) - Base dir for actions, extends base. Default - project root (./)
  • reducersDir (string) - Base dir for reducers, extends base. Default - project root (./)
  • styleExtension (string) - Extensions for generated style file. Default - css
  • componentName.prepend (string) - Prefix for generated component. Default - undefined
  • componentName.append (string) - Suffix for generated component. Default - undefined
  • template.component (string) - Path for your own component template. Default - undefined
  • template.reducer (string) - Path for your own reducer template. Default - undefined
  • template.action (string) - Path for your own action template. Default - undefined

Example options

"react-create-helper": {
    "base": "./src",
    "actionsDir": "Actions",
    "reducersDir": "Reducers",
    "componentName": {
      "prepend": "My",
      "append": "Component"
    },
    "styleExtension": "scss"
  }

Basic usage

Cli options

  • -c generate component (default)
  • -r generate reducer
  • -a generate action
  • -m generate module
  • -h help (options and usage examples)
rch Header

output

Header
├── Header.js
├── Header.scss
└── index.js

Also you can specify path like rch my/path/Header

Generate action & reducers
$ rch -ar ExampleAction

This will generate something like this

src
  ├── Actions
  │   └── ExampleAction.js
  └── Reducers
      └── ExampleReducer.js
Generate module
$ rch -m ExampleModule

This will generate something like this

ExampleModule
├── ExampleModule.js
├── ExampleModule.scss
├── index.js
└── redux
    ├── reducers.js
    ├── actions.js
    └── constants.js

Define own templates

"react-create-helper": {
    "template": {
      "component": "rch_templates/component.js",
      "reducer": "rch_templates/reducer.js",
      "action": "rch_templates/action.js",
    },
  }
Base template

{basename} is the name you provided with rch -c {basename}

./rch_templates/component.js

 
module.exports = ({basename}) =>
`import React, { Component } from 'react';
import { connect } from 'react-redux';
 
class ${basename} extends Component {
  render() {
    return (
      <div></div>
      )
  }
}
 
const mapStateToProps = (state) => {
  return {
    
  }
};
const mapDispatchToProps = (dispatch) => {
  return {
    exampleName: (exampleProps) => {
      dispatch(exampleActionName)
    }
  }
};
 
export default connect(mapStateToProps, mapDispatchToProps)(${basename});
`;
 

The same for action, and reducer.

Have fun

Package Sidebar

Install

npm i react-create-helper

Weekly Downloads

1

Version

1.1.0

License

ISC

Last publish

Collaborators

  • artemsky