React Component Creator

Overview

React Component Creator is a Visual Studio Code extension that helps you quickly generate a folder structure with React component files. This extension simplifies the process of creating new React components by generating boilerplate code and file structure.

Features

• Generates a folder with the following files:
  • ComponentName.tsx
  • ComponentName.styles.ts
  • index.ts
  • ComponentName.types.ts
• Allows you to customize the templates for these files using a webview-based editor.

Installation

1. Install the extension from the Visual Studio Code Marketplace.
2. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
3. Type Create Component or Create Component from Folder and follow the prompts.

Usage

1. Create Component using Command Palette:

   • Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
   • Type Create Component and follow the prompts to enter the component name.
   • The extension will generate the necessary files and folder structure in the current directory.

2. Create Component from Folder:

   • Right-click on a folder in the Explorer pane.
   • Select Create Component from Folder.
   • Enter the name of the component.
   • The extension will generate the necessary files and folder structure in the selected directory.

3. Edit Templates using Command Palette:

   • Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
   • Type Edit Templates and select the command.
   • A webview will open, allowing you to edit the templates for the component files.
   • Click Save Templates to save your changes.

4. Edit Templates using Context Menu:

   • Right-click on a folder in the Explorer pane.
   • Select Edit Templates.
   • A webview will open, allowing you to edit the templates for the component files.
   • Click Save Templates to save your changes.

Configuration

You can configure the templates for the files in the extension settings or using the webview editor. Go to File > Preferences > Settings and search for Component Generator Templates. Here you can customize the templates for the component files.

• componentGenerator.templates.component: Template for the component .tsx file.
• componentGenerator.templates.styles: Template for the component styles file.
• componentGenerator.templates.index: Template for the component index file.
• componentGenerator.templates.types: Template for the component types file.

Example

Here's an example of a generated component:

MyComponent.tsx

import React, { ReactElement } from 'react';
import { useMyComponentStyles } from './MyComponent.styles';
import { MyComponentProps } from './MyComponent.types';

export const MyComponent = (props: MyComponentProps): ReactElement => {
  const classes = useMyComponentStyles();
  return (
    <div className={classes.container}>
      MyComponent Component
    </div>
  );
};