⚡ React Spark

Overview

React Spark is a VS Code extension designed to auto-generate predefined React components on-the-fly when you type <Component />.

It supports JavaScript (JS) and TypeScript (TS) components, works in module or single-file modes, and even manages nested dependencies automatically. With this tool, developers can scaffold React components in seconds — reducing boilerplate and speeding up development. 🚀

✨ Features

• ⚡ Component Auto-Generation – Instantly generate React components with predefined templates.
• 📘 JS/TS Support – Works with both JavaScript and TypeScript.
• 🗂 Module & Single-File Modes – Choose between modular (separate files) or single-file components.
• 🔗 Nested Dependencies – Automatically handles component dependencies.
• 🔌 Simple Integration – Minimal setup, works right inside VS Code.
• 🛠 Customizable Templates – Extend and define your own component templates.

📦 Installation

1. Prerequisites

• VS Code v1.60.0+
• Node.js installed

2. Install the Extension

From Marketplace

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
3. Search for React Spark and click Install.

Manual Installation (from source)

# Clone the repo
# git clone https://github.com/P/react-spark.git

# Enter the directory
cd react-spark

# Install dependencies
npm install

# Package the extension
npm run package

Then in VS Code:

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
2. Select Extensions: Install from VSIX…
3. Choose the generated .vsix file. ✅

🚀 Usage

1. Create a New Component

• Simply type <Component /> (replace Component with your desired name).
• The extension will:
  1. Prompt you to confirm component generation.
  2. Ask you to pick a variant (if multiple exist).
  3. Generate the component files in the correct location.

2. Supported File Types

• JavaScript → .jsx
• TypeScript → .tsx

3. Configuration Options

Available under File > Preferences > Settings (or Cmd+, on macOS):

• Component Output Style → module (separate files) or single-file
• Base Directory → Where new components are stored
• Component Variants → Add custom variants/templates

🧩 Customizing Templates

Templates live inside the templates directory (templates/js or templates/ts). Each template is a JSON file describing variants, dependencies, and files.

Example template:

{
  "variants": {
    "default": {
      "dependencies": ["Navbar", "Footer"],
      "files": {
        "__NAME__.jsx": "export default function __NAME__(){ return <div>Default Component</div>; }",
        "index.js": "export { default } from './__NAME__';"
      }
    }
  }
}

• Variants → e.g., default, large, small
• Dependencies → Components this one depends on
• Files → Files to generate (using __NAME__ as the placeholder)

👉 To add a new template:

1. Create a JSON file inside templates/js or templates/ts.
2. Define its structure as above.

💡 Example

A Card component with two variants:

{
  "variants": {
    "default": {
      "dependencies": [],
      "files": {
        "__NAME__.jsx": "export default function __NAME__() { return <div>Card Default</div>; }"
      }
    },
    "large": {
      "dependencies": ["Button"],
      "files": {
        "__NAME__.jsx": "export default function __NAME__() { return <div>Card Large</div>; }"
      }
    }
  }
}

When you type <Card />, you’ll be prompted to choose between the default or large variant. 🎉

🤝 Contributing

We welcome contributions! 🙌

1. Fork the repo
2. Create your branch → git checkout -b my-new-feature
3. Commit changes → git commit -am 'Add new feature'
4. Push → git push origin my-new-feature
5. Open a Pull Request

📜 License

This project is licensed under the ISC License – see the LICENSE file for details.

🙏 Acknowledgements

• 🖥 VS Code – for the amazing extension platform
• ⚛ React – making modern frontend development fun
• 💡 Inspiration from other open-source VS Code extensions

🛣 Roadmap

• [ ] Add support for class-based components
• [ ] Provide Prettier integration for formatting
• [ ] Allow custom snippets for faster scaffolding
• [ ] Add unit tests for component generation logic