https://github.com/ndrwbv/react-component-generator-vs-code-extension

https://github.com/ndrwbv/react-component-generator-vs-code-extension

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ndrwbv/react-component-generator-vs-code-extension
• Owner: ndrwbv
• License: mit
• Created: 2023-11-27T13:28:42.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-14T14:15:11.000Z (about 1 year ago)
• Last Synced: 2023-12-15T14:51:28.179Z (about 1 year ago)
• Language: TypeScript
• Size: 1.47 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Component generator extention for VSCode

## Features

### New React folder

Creates folder structure: 

```

└── ComponentName/

    ├── ComponentName.tsx

    └── ComponentName.styles.ts

```

### Create RTK Slice

```tsx

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) => {

			state.data = action.payload;

		},

	},

});

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

export const { action } = ComponentNameSlice.actions;

```

### Create Single React component

```tsx

import { FC } from 'react';

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

export const ComponentName: FC = () => ComponentName;

```

### Create Story

```tsx

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;

export default meta;

type Story = StoryObj;

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