react-gen-component

A customizable cli tool that generates/scaffolds react components from templates.

npm i -g react-gen-component

Table of Contents

1. Usage
2. Typescript
3. Custom Templates
4. Config File
5. Options

Usage

gen-component MyComponent
# Or shorthand
gen MyComponent

Creates a new component:

📁 myComponent
    📄 myComponent.jsx # implementation
    📄 index.js # to export components

myComponent.jsx

// External imports
import React from "react";

// Component imports

// Project imports

const MyComponent = (props) => {
    return <></>;
};

MyComponent.defaultProps = {};

export default MyComponent;

index.js

import MyComponent from "./myComponent";

export * from "./myComponent";

export default MyComponent;

Typescript

To generate typescript files instead, use the --typescript or --ts flag:

gen MyComponent --ts

Creates a new typescript component:

📁 myComponent
    📄 myComponent.tsx # implementation
    📄 index.ts # to export components and types
    📄 types.ts # for types and interfaces

myComponent.tsx

// External imports
import React from "react";

// Component imports
import { MyComponentProps } from "./types";

// Project imports

const MyComponent = (props: MyComponentProps) => {
    return <></>;
};

MyComponent.defaultProps = {};

export default MyComponent;

index.ts

import MyComponent from "./myComponent";

export * from "./myComponent";
export * from "./types";

export default MyComponent;

types.ts

export interface MyComponentProps {}

Custom Templates

There are a few templates available by default. You can also create your own templates.

1. Create a custom template folder and name it anything you want. All your templates will be a subdirectory of this folder.

📁 templates

2. Create a folder with the name of the template. If the name is the same as one of the included templates, your custom template will be giver higher precedence and will be used whenever you use that name.

📁 templates
    📁 myTemplate

3. Add a file called component.jsx.js or component.jsx.ts

📁 templates
    📁 myTemplate
        📄 component.jsx.js

Anatomy of template file names: [a].[b].[c]

[a]: The name of the file. Occurrences of the word component will be replaced with the component name.

[b]: The extension of the generated file file. If the --typescript flag has been passed, any occurrences of js will be replaced with ts (eg. jsx to tsx).

[c]: The extension of the template file. Can be .ts or .js.

4. Add any additional file(s) you need. These files can be in typescript too.

📁 templates
    📁 myTemplate
        📄 component.jsx.js
        📄 component.stories.jsx.js
        📄 component.test.jsx.js
        📄 types.js.js
        📄 index.js.js

5. In each file, you need to export default a function that takes the following parameters:

• componentName : string The name of the component you are generating.
• fileName : string The name of the component file
• isTypescript : boolean Has the typescript flag been passed?

The function should return a string or null.

Example:

// component.jsx.js
export default (name, fileName, isTypescript) => `

const ${name} = (props${isTypescript ? `: ${name}Props` : ""}) => {
    return (<></>);
};

export default ${name};
`;

If you want to exclude a file conditionally, you can return null:

// types.js.js
export default (name, fileName, isTypescript) =>
    isTypescript ? `export interface ${name}Props {}` : null;

6. Use your custom template using the template-dir and --template options.

gen MyComponent --td templates --t myTemplate

Results in:

📁 myComponent
    📄 myComponent.jsx
    📄 myComponent.stories.jsx
    📄 myComponent.test.jsx
    📄 index.js

Or if the --typescript flag is passed:

gen MyComponent --td templates --t myTemplate --typescript

Results in:

📁 myComponent
    📄 myComponent.tsx
    📄 myComponent.stories.tsx
    📄 myComponent.test.tsx
    📄 types.ts
    📄 index.ts

To avoid having to pass the template directory every time, you can use a config file.

Config File

You can create a gen.config.json file to store your config. The script will search for the nearest config file and use that.

{
    "directory": "./src/components",
    "template-dir": "./src/templates",
    "typescript": true,
    "case": "kebab"
    // ... Other parameters if needed
}

Options

typescript

• --ts or --typescript: Generate typescript files.

  gen MyComponent --ts

directory

• -d or --dir or --directory: Specify components directory. Default: is . (directory where the script is run).

  Example:

  gen MyComponent --dir components

  Generates:

  📁 components
      📁 myComponent
          📄 myComponent.jsx # implementation
          📄 index.js # to export components

case

• -c or --case: Specify file name case.

  • camel (camelCase) default
  • kebab (kebab-case)
  • pascal (PascalCase)

  Example:

  gen MyComponent --case kebab

  Generates:

  📁 my-component
      📄 my-component.jsx # implementation
      📄 index.js # to export components

comp-case

• --cc or --comp-case: Specify the component file name case. If not specified, it is the same as --case.

  • camel (camelCase) default
  • kebab (kebab-case)
  • pascal (PascalCase)

  Example:

  gen MyComponent --case kebab --comp-case pascal

  Generates:

  📁 my-component
      📄 MyComponent.jsx # implementation
      📄 index.js # to export components

template

• -t or --template: Specify the template.

  • functional default
  • class

  Example:

  gen MyComponent -t class

template-dir

--td or --template-dir: Specify a custom template directory. You can then use the template option to specify a custom template. For more info see how to make custom templates.

Example:

📁 customTemplates
    📁 classComp
        📄 component.js # implementation
        📄 index.js # to export components
        📄 types.js # for types and interfaces
        📄 animations.js # for animations
📁 tests
📁 components
...

gen MyComponent --td customTemplates -t classComp

Generates:

📁 myComponent
    📄 myComponent.jsx # implementation
    📄 index.js # to export components
    📄 types.js # for types and interfaces
    📄 animations.js # for animations

help

-h or --help: Show help.

gen --help