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!