React Component Generator Pro

Professional React component generator by EonMirth

Professional React component generator for VS Code with professional scaffolding, smart features, and a powerful template system.

✨ Features

🚀 Component Scaffolding

• Generate TypeScript or JavaScript React components
• Choose between Functional or Class components
• Automatic PropTypes/Props interface inclusion
• Support for CSS, SCSS, CSS Modules, and Styled Components

📁 File Structure Generation

• Creates organized component folders
• Generates index.tsx for barrel exports
• Includes component.tsx with your template
• Adds styles file in your preferred format
• Creates test.tsx with React Testing Library setup
• Generates .stories.tsx for Storybook integration

🎨 Premium Templates

10+ built-in templates included:

• Functional Component - Modern React with hooks
• Class Component - Traditional class-based component
• Material-UI Component - Pre-configured MUI button
• Ant Design Component - Ant Design card component
• Form Component - Form with state management

🔄 Template System

• Save custom templates from your components
• Share templates via GitHub Gist
• Import templates from the community
• Browse all templates in one place

🎯 Smart Features

• Framework Detection - Auto-detects Next.js, Gatsby, Vite, CRA
• PascalCase Validation - Ensures proper component naming
• Performance Monitoring - Generates components in < 2 seconds
• Progress Indicators - Visual feedback during generation

📦 Installation

From Marketplace (Coming Soon)

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "React Component Generator Pro"
4. Click Install

From VSIX (Current)

1. Download the .vsix file
2. Open VS Code
3. Extensions > ... > Install from VSIX

🚀 Quick Start

Method 1: Right-Click Context Menu

1. Right-click any folder in Explorer
2. Select "React: Generate Component"
3. Follow the prompts

Method 2: Command Palette

1. Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac)
2. Type "React: Generate Component"
3. Configure your component

🎮 Usage

Generate a Component

1. Component Name: MyButton (PascalCase)
2. Component Type: Functional / Class
3. Language: TypeScript / JavaScript
4. Style Type: CSS / SCSS / CSS Modules / Styled Components
5. Options:
   ✓ Include Props Interface
   ✓ Include Tests
   ☐ Include Storybook

Result:

MyButton/
├── index.ts
├── MyButton.tsx
├── MyButton.module.css
├── MyButton.test.tsx
└── MyButton.stories.tsx (if selected)

Template Commands

⚙️ Configuration

Access settings via File > Preferences > Settings and search for "React Generator Pro":

🎯 Supported Frameworks

• ✅ Next.js - Auto-adds 'use client' directive
• ✅ Gatsby - Framework-specific configurations
• ✅ Vite - Optimized for Vite projects
• ✅ Create React App - Traditional CRA support

📚 Examples

Material-UI Component

import React from 'react';
import { Button, ButtonProps } from '@mui/material';

interface MyButtonProps extends Omit<ButtonProps, 'variant'> {
  variant?: 'text' | 'outlined' | 'contained';
}

const MyButton: React.FC<MyButtonProps> = ({
  variant = 'contained',
  children,
  ...props
}) => {
  return (
    <Button variant={variant} {...props}>
      {children || 'MyButton'}
    </Button>
  );
};

export default MyButton;

Form Component

Includes state management, validation, and submission handling out of the box!

🤝 Contributing

We welcome template contributions! Share your templates via GitHub Gist:

1. Create a unique component structure
2. Use React: Create Template
3. Use React: Share Template
4. Share the Gist URL with the community

📄 License

MIT License - feel free to use in your projects!

🐛 Issues & Feedback

Found a bug or have a feature request?

• File an issue on GitHub
• Contact: [your-email@example.com]

🎉 What's Next?

Coming soon:

• 🎨 Visual Preview Panel
• 📝 Props Editor with real-time updates
• 📸 Export component as PNG
• 🧠 Smart import auto-detection
• ↩️ Undo/Redo support

Made with ❤️ for React developers

Generate components, not boilerplate!