create-new-react-component

A command-line interface (CLI) tool to quickly generate React components with optional TypeScript support and CSS styles.

Installation

Install globally:

npm install -g create-new-react-component

Or install as dev dependency:

npm install create-new-react-component --save-dev

Usage

create-new-react-component

The tool will guide you through an interactive process to create your component with the following options:

1. Component Name (must be in PascalCase)
2. Component Type (Functional, Arrow Function, Class, Memoized, or ForwardRef)
3. Language (JavaScript or TypeScript)
4. Styling Solution (CSS, SCSS, or None)
5. Props Support (Yes/No)
6. React Import Statement (Yes/No)

Component Type Templates

The tool now supports multiple component type templates:

Functional Component

function MyComponent(props) {
    return (
        <>
            {/* Add your component content here */}
        </>
    );
}

Arrow Function Component

const MyComponent = (props) => {
    return (
        <>
            {/* Add your component content here */}
        </>
    );
}

Class Component

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <>
                {/* Add your component content here */}
            </>
        );
    }
}

Memoized Component (React.memo)

import { memo } from 'react';

const MyComponent = memo((props) => {
    return (
        <>
            {/* Add your component content here */}
        </>
    );
});

ForwardRef Component (React.forwardRef)

import { forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => {
    return (
        <div ref={ref}>
            {/* Add your component content here */}
        </div>
    );
});

Help Command

For more information, run the following command:

create-new-react-component --help

or

create-new-react-component -h

to see the help message.

Examples

# Start the interactive component creation process
create-new-react-component

References

• A simple, customizable utility for adding new React components to your project.
• Delightful React File/Directory Structure

🗺️ Roadmap

Here are the planned features and improvements:

Coming Soon 🚀

• Extended Component Template Options
• Enhanced Styling Support

Under Consideration 🤔

• Storybook Integration
• Automated Test File Generation
• CLI Interaction Improvements

Completed ✅

• Basic Component Generation
• CSS Module Support
• Component Type Templates (Functional, Arrow, Class, Memoized, ForwardRef)
• Automated NPM Publishing via GitHub Actions

For detailed development plans, please check our GitHub Projects page.