React File Templates

Create React template files quickly from the folder context menu in VSCode. This extension helps you generate React components, Storybook files, Contexts, and Test files with boilerplate code automatically.

Features

Create React Component File: Generate a new .tsx React component with basic props structure.
Create Storybook File: Generate a .stories.tsx file for a component with default Storybook setup.
Create Context File: Generate a .tsx Context file with provider and custom hook.
Create Test File: Generate a .test.tsx file using @testing-library/react with a basic render test.

Usage

Right-click a folder in VSCode Explorer:
- Create React Component File
- Create Context File
Right-click a .tsx or .jsx component file:
- Create Storybook File
- Create Test File

The extension will automatically create files only if they don't exist to prevent overwriting.

Examples

Create React Component

Input: Button → generates Button.tsx:

import React from 'react';

type ButtonProps = {
  children?: React.ReactNode;
};

const Button: React.FC<ButtonProps> = () => {
  return (
    <div>
      {children}
    </div>
  );
};

export default Button;

Create Context

Input: Auth → generates AuthContext.tsx with provider and hook.

import React, { createContext, useContext } from "react";

type AuthContextActions = {
  handleClick: () => void;
};

const AuthContext = createContext({} as AuthContextActions);

interface AuthContextProviderProps {
  children: React.ReactNode;
}

const AuthProvider: React.FC<AuthContextProviderProps> = ({ children }) => {

  const handleClick = () => {
    // Handle click
  };

  return (
    <AuthContext.Provider value={{ handleClick }}>
      {children}
    </AuthContext.Provider>
  );
};

const useAuth = (): AuthContextActions => {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }

  return context;
};

export { AuthProvider, useAuth };

Create Storybook File

Select Component File: Button.tsx → generates Button.stories.tsx:

import type { Meta, StoryObj } from '@storybook/react';
import Button from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ["autodocs"],
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Default: Story = {
  args: {
    children: 'Hello Button',
  },
};

Create Test File

Select Component File: Button.tsx → generates Button.test.tsx:

import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button', () => {
  it('should render', () => {
    render(<Button />);
    expect(screen.getByText('Hello Button')).toBeInTheDocument();
  });
});

Settings (Optional)

Currently, there are no configurable settings. Future versions may allow setting default folder or template preferences.

React File Templates