https://github.com/mukundkumra/react-component-generator
A simple CLI tool to quickly generate React component folders with JSX and CSS files. The package scaffolds a folder with a React component template that includes imports for the CSS file and a functional component ready for editing.
https://github.com/mukundkumra/react-component-generator
cli component css generator jsx react scaffold tool
Last synced: 5 months ago
JSON representation
A simple CLI tool to quickly generate React component folders with JSX and CSS files. The package scaffolds a folder with a React component template that includes imports for the CSS file and a functional component ready for editing.
- Host: GitHub
- URL: https://github.com/mukundkumra/react-component-generator
- Owner: mukundkumra
- License: mit
- Created: 2024-10-08T08:36:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-08T10:52:32.000Z (over 1 year ago)
- Last Synced: 2025-10-09T02:25:53.604Z (9 months ago)
- Topics: cli, component, css, generator, jsx, react, scaffold, tool
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@mukundkumra/react-component-generator
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Component Generator
A simple CLI tool for generating React components with a predefined folder structure and boilerplate code.
## Features
- Easily generate React components with a single command.
- Automatically creates the necessary folder structure.
- Generates .jsx and .css files with boilerplate code.
## Installation
You can either clone the git or install with npm:
1. Clone the repository:
```bash
git clone https://github.com/mukundkumra/react-component-generator
cd react-component-generator
npm link
```
2. Install the package:
```bash
npm i -g @mukundkumra/react-component-generator
```
## Usage
To generate a React component, use the command:
```bash
gen
```
### Examples
1. **Generate a simple component**:
```bash
gen Home
```
This will create the following structure:
```
Home/
├── Home.jsx
└── Home.css
```
2. **Generate a nested component**:
```bash
gen Test/Home
```
This will create the following structure:
```
Test/
└── Home/
├── Home.jsx
└── Home.css
```
## Generated File Structure
### Home.jsx
```javascript
import './Home.css';
import React from 'react';
function Home() {
return (
{/* Add your JSX here */}
);
}
export default Home;
```
### Home.css
```css
.Home {
/* Add your styles here */
}
```
## Contributing
Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or feature requests.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.