vscode-reactsnippets

The Capetec VS Code Snippets extension provides a convenient way to create React components, Redux slices, and translation files directly from the context menu in the Visual Studio Code explorer. This extension simplifies the development of React and React Native projects by offering templates for various types of components and files. You can quickly create new components with or without props, components with translation support, as well as Redux slices and translation folders.

Features

• Create React components with or without props
• Create React components with translation support
• Create Redux slices using Redux Toolkit
• Generate translation folders and files

Usage

Creating a Default Component

To create a new default component:

1. Right-click on a folder in the VS Code explorer.
2. Select New React File... > New Component... > New Component.
3. Enter the component name.

This will create a new component file with the following structure:

export const MyComponent = (): JSX.Element => {
  return <div>{/* Your component content */}</div>;
};

Creating a Component with Props

To create a new component with props:

1. Right-click on a folder in the VS Code explorer.
2. Select New React File... > New Component... > New Component with Props.
3. Enter the component name.

This will create a new component file with the following structure:

import React from "react";

export type MyComponentProps = {
  // Define your props here
};

export const MyComponent = ({}: MyComponentProps): JSX.Element => {
  return <div>{/* Your component content */}</div>;
};

Creating a Component with Translation Support

To create a new component with translation support:

1. Right-click on a folder in the VS Code explorer.
2. Select New React File... > New Component... > New Component with Translations Folder.
3. Enter the component name.

This will create a new component file and a translations folder with the following structure:

import React from "react";
import "./translations";
import { useTranslation } from "react-i18next";

export const MyComponent = (): JSX.Element => {
  const { t } = useTranslation();
  return <div>{/* Your component content */}</div>;
};

Translation files structure:

translations/
│
├── de.json
├── en.json
└── index.ts

Creating a Redux Slice

To create a new Redux slice:

1. Right-click on a folder in the VS Code explorer.
2. Select New React File... > New Redux-Toolkit... > New Redux Slice.
3. Enter the slice name.

This will create a new Redux slice file with the following structure:

import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";

// Define a type for the slice state
export interface MySliceState {
  test: boolean;
}

// Define the initial state using that type
const initialState: MySliceState = {
  test: false,
};

// Implement the slice
export const mySlice = createSlice({
  name: "mySlice",
  initialState,
  reducers: {
    setTest: (state, action: PayloadAction<boolean>) => {
      state.test = action.payload;
    },
  },
});

export const { setTest } = mySlice.actions;

export const mySliceReducer = mySlice.reducer;