RECOG

React Component Generation - A command line interface tool to generate React components on the fly.

Installation

npm

npm install -g recog

local

# checkout recog
git checkout https://github.com/fergusfrl/recog.git

# install dependencies
npm install

# transpile typescript
npm run build

# set symlink
npm link

# ready to go!

Usage

Component

recog <ComponentName> [options]

options:

• -d, --dir Specify a directory to generate the component. Default Value: current working directory (CWD), "./"
• -s, --state Generates a new stateful React component.
• -t, --typescript Generates a new Typescript React component.
• -p, --props Generate a React component with props.
• -f, --folder Generates a new Folder which will contain the component. Useful in conjunction "--jest" and "-css" commands.
• -j, --jest Generates a new jest test file for the component.
• -c, --css Generates a new css file for the component.

Examples

Generate Simple Component

Command

recog Button

Result

/* ./Button.jsx */

import React from 'react';

const Button = () => (
    <div className="button">
        Button
    </div>
);

export default Button;

Generate Complex Component

Comand

$ recog Button -d ./components --state --typescript --props

Result

/* ./components/Button.tsx */

import React, { useState } from 'react';

interface IStateButton {
    // state interface
}

interface IPropsButton {
    // props interface
}

const Button: React.FC = (props: IPropsButton) => {
    const [state, setState] = useState<IStateButton>({});
    return (
        <div>
            Button
        </div>
    );
};

export default Button;

Generate Additional Files

Command

$ recog Button --folder --jest --css

Result

|_<current working directory>
    |_ Button
        |_ Button.jsx
        |_ Button.test.js
        |_ button.css