1.1.2 • Published 6 years ago
@gmati13/rcgen v1.1.2
react-component-generator
Generator of React components
Install
npm
sudo npm i -g @gmati13/rcgen
yarn
yarn global add @gmati13/rcgen
Usage
Generate common component
rcgen MyComponent
result
MyComponent
|- index.js
|- MyComponent.jsx
index.js
import MyComponent from './MyComponent.jsx';
export default MyComponent;
MyComponent.jsx
import React from 'react';
class MyComponent extends React.Component {
render() {
return ( <div> </div> );
}
}
export default MyComponent;
Generate with options
rcgen MyComponent --styles
result
index.js
import MyComponent from './MyComponent.jsx';
import styles from './styles';
export default MyComponent;
Multiple generate
rcgen Component1 Component2 --options
Config .rcgen.json
Configure custom hoc components
{
"global": {
"name": "App",
"state": false,
"libs": [],
"import": {
"from": "$lib",
"as": "$lib"
},
"export": "$lib($name)"
},
"libs": {
"styles": {
"import": {
"from": "./styles",
"as": "styles"
},
"export": "$name"
},
"jss": {
"import": {
"from": "react-jss",
"as": "injectSheet"
},
"export": "injectSheet(styles)($name)"
},
"redux": {
"import": {
"from": "redaction",
"what": ["connect"]
},
"export": "connect({\n})($name)"
}
}
}
Usage one hoc
rcgen Component --jss --styles
result
index.js
import injectSheet from 'react-jss';
import styles from './styles';
import Component from './Component.jsx';
export default injectSheet(styles)(Component);
Usage two and more hocs
rcgen Component --jss --redux --styles
result
index.js
import { connect } from 'redaction';
import injectSheet from 'react-jss';
import styles from './styles';
import Component from './Component.jsx';
export default injectSheet(styles)(connect({})(Component));
Constants and variables
rcgen Component @classes %value
result
Component.jsx
import React from 'react';
class Component extends React.Component {
render() {
const { classes } = this.props;
let { value } = this.props;
render (
<div></div>
)
}
}
export default Component;
With state
rcgen Component -state
result
Component.jsx
import React from 'react';
class Component extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
render (
<div></div>
)
}
}
export default Component;
Warning!
rcgen Component --jss --redux is not like rchen Component --redux --jss!