1.1.0 • Published 7 years ago
react-create-helper v1.1.0
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, extendsbase
. Default - project root (./
)reducersDir
(string) - Base dir for reducers, extendsbase
. 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