React Code Generator

Install

npm install -g @samnoh/react-gen

Usage

• Create a class-based 'Button' jsx component in the '/src' directory

reactgen -o /src -n Button -c

• Create a functional 'AuthTemplate' tsx component in the default directory

reactgen -n AuthTemplate -t

• Create a functional 'NavBar' jsx component in the default directory using your own template, Template.js

reactgen -T Template.js -n NavBar

Config

• You can set default values in package.json
  • template configuration is used to set your own template variables

"config": {
    "reactgen": {
        "defaultName": "Component",
        "baseDir": "src",
        "modules": {
            "styled": "styled-components",
            "{ Link }": "react-router-dom"
        },
        "typescript": false,
        "classBased": false,
        "template": {
            "LAZY": "React.lazy(() => import(''));",
            "USEEFFECT": "useEffect(() => {}, []);"
        }
    }
}

Your own template

• TEMPLATE_NAME and MODULES are preset template variables

import React, { useEffect } from 'react';
import PageTemplate from 'components/PageTemplate';
MODULES

const  = LAZY
const  = LAZY

const TEMPLATE_NAME = () => {
    USEEFFECT

    return <PageTemplate></PageTemplate>;
};

export default TEMPLATE_NAME;

reactgen -n SideBar -T /templates/test.js -o /components

• Result

import React, { useEffect } from 'react';
import PageTemplate from 'components/PageTemplate';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

const  = React.lazy(() => import(''));
const  = React.lazy(() => import(''));

const SideBar = () => {
    useEffect(() => {}, []);

    return <PageTemplate></PageTemplate>;
};

export default SideBar;