Useful React snippets for VS code

typescript-react-snippets.code-snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  "Modular react arrow function component": {
    "prefix": "mtsrafce",
    "scope": "typescript,typescriptreact,javascript,javascriptreact",
    "body": [
      "interface ${1:${TM_FILENAME_BASE}}Props {}",
      "",
      "export const ${1:${TM_FILENAME_BASE}}: React.FC<${1:${TM_FILENAME_BASE}}Props> = () => {",
      "  return <div>${1:${TM_FILENAME_BASE}}</div>;",
      "};",
      ""
    ],
    "description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interface"
  },
  "React Context component": {
    "prefix": "contextcmp",
    "body": [
      "import { createContext, useContext, useMemo, type FC, type PropsWithChildren } from 'react';",
      "",
      "export interface I$1Context {}",
      "",
      "const $1Context = createContext<I$1Context | null>(null);",
      "$1Context.displayName = '$1Context';",
      "",
      "const $1ContextProvider: FC<PropsWithChildren> = ({ children }) => {",
     	"  $0",
      "  const value = useMemo(() => ({}), []);",
      "",
      "  return <$1Context.Provider value={value}>{children}</$1Context.Provider>;",
      "};",
      "",
      "const use$1Context = () => {",
      "  const context = useContext($1Context);",
      "  if (context === null) {",
      "    throw new Error(`use$1Context is used outside of ${$1Context.displayName}`);",
      "  }",
      "  return context;",
      "};",
      "",
      "export { $1ContextProvider, use$1Context };",
      ""
    ],
    "description": "Creates a React context"
  },
  "Storybook component": {
  "prefix": "storybookComponent",
  "body": [
    "import { type Meta, type StoryFn } from '@storybook/react';",
    "import { $1 } from './$1';",
    "",
    "export default {",
    "  title: 'UI/$1',",
    "  component: $1,",
    "  decorators: [(story) => <div>{story()}</div>],",
    "} satisfies Meta<typeof $1>;",
    "",
    "const createComponent = () => {",
    "  const Template: StoryFn<typeof $1> = (args) => <$1 {...args} />;",
    "",
    "  return Template;",
    "};",
    "",
    "export const Default = createComponent().bind({});",
    ""
  ],
  "description": "Creates a component for storybook"
}
}