✨ Features

• ⚙️ Supports JavaScript (.jsx) and TypeScript (.tsx)
• 🎨 Multiple styling options: CSS, SCSS, CSS Modules, SCSS Modules
• 🛡 Scoped styling capability
• 📁 Configurable folder structure
• ✅ Input validation and overwrite protection

📋 Prerequisites

🖥 System Requirements

• Node.js ≥16.0.0
• npm ≥7.0.0 or yarn

📦 Project Dependencies

| Feature | Required Packages | |---------------|--------------------------------| | TypeScript | typescript, @types/react | | SCSS | sass | | CSS Modules | Build tool configuration |

🛠 Installation

npm install -g react-folder-generator
# or for project-specific
npm install react-folder-generator --save-dev

🗂 Folder Structure Conventions

📌 Naming Patterns

Kebab-case (Recommended)

src/components/my-component/
├── index.tsx
├── index.module.scss

PascalCase

src/components/MyComponent/
├── MyComponent.tsx
├── MyComponent.module.scss

Flat Structure

src/components/
├── MyComponent.tsx
├── MyComponent.module.scss

🎯 Scoped vs Non-Scoped Styles

| Type | File Pattern | Usage Scenario | |------------|---------------------|-------------------------| | Scoped | ComponentName.ext | Component-specific | | Non-Scoped | index.ext | Shared/global styles |

🔍 What is Scoped Styling?

Scoped styling creates component-specific style files following naming patterns like:

📄 File Naming

• Component: Button.tsx
• Style: Button.module.scss (when using --scoped-style)

🎯 Benefits

• Prevents style leakage
• Explicit component-style association
• Better large-scale project organization

💡 Example

// Button.tsx
import styles from './Button.module.scss';

const Button = () => (
  <button className={styles.root}>
    Click me
  </button>
);

// Button.module.scss
.root {
  padding: 1rem 2rem;
  background: blue;

  &:hover {
    background: darkblue;
  }
}

💡 Usage Options

🔧 Basic Command

react-folder-generator ComponentName [options]

🧾 Option Matrix

| Option | File Pattern | Requires | |------------------|---------------------|----------------------| | --ts | .tsx | TypeScript | | --scss | .scss | sass | | --module-scss | .module.scss | CSS Modules config | | --scoped-style | Component-named | - |

🏗 Example Outputs

✅ Standard Component

react-folder-generator sidebar --scss

components/
  sidebar/
    ├── index.jsx
    └── index.scss

✅ Scoped TypeScript Module

react-folder-generator AuthForm --ts --module-scss --scoped-style

components/
  auth-form/
    ├── AuthForm.tsx
    ├── AuthForm.module.scss
    └── index.ts

⚙️ Build System Config

📦 Webpack CSS Modules Setup

{
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    },
    'sass-loader'
  ]
}

❓ FAQ

🟡 When should I use scoped styles?

Recommended for:

• Large codebases
• Component libraries
• Teams with multiple developers

🟡 What's the difference between index.scss and Component.module.scss?

• index.scss: Global/shared styles
• Component.module.scss: Locally scoped styles for a component

👨‍💻 Author

Afriduzzaman
Senior Frontend Engineer
GitHub @Thetourist2051 | Email [email protected]

📜 License

MIT © 2025 Afriduzzaman

This README follows technical writing best practices for clarity, visual hierarchy, and developer usability.