Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>React / Styled / Story component generatorNew to Visual Studio Code? Get it now.
React / Styled / Story component generator

React / Styled / Story component generator

Andrew Boev

|
83 installs
| (2) | Free
Generate React components
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Component generator extention for VSCode

Features

New React folder

Creates folder structure:

└── ComponentName/
    ├── ComponentName.tsx
    └── ComponentName.styles.ts

Create RTK Slice

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface ComponentNameState {
	data: number;
}

const initialState: ComponentNameState = {
	data: 1,
};

export const ComponentNameSlice = createSlice({
	name: `ComponentName`,
	initialState,
	reducers: {
		action: (state, action: PayloadAction<number>) => {
			state.data = action.payload;
		},
	},
});

export const dataSelector = (state: IRootState): number => state.ComponentName.data;

export const { action } = ComponentNameSlice.actions;

Create Single React component

import { FC } from 'react';

import { ComponentNameStyled } from './ComponentName.styles';

export const ComponentName: FC = () => <ComponentNameStyled>ComponentName</ComponentNameStyled>;

Create Story

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

import { ComponentName } from './ComponentName';

const meta = {
	// eslint-disable-next-line @typescript-eslint/quotes
	tags: ['autodocs'],
	component: ComponentName,
	parameters: {}
} satisfies Meta<typeof ComponentName>;

export default meta;

type Story = StoryObj<typeof ComponentName>;

export const Default: Story = {
	args: {},
};

Usage

  1. Right click on the file or folder in the file explorer
  2. Select one of the options:
    • Create React + Styled component folder
    • Create RTK Slice
    • Create Single React component
    • Create Story
  3. Enter a name in the pop up
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft