React/Typescript snippets for Visual Studio Code

react-ts.code-snippets

{
  // Place your frlncr workspace 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.
  // Placeholders with the same ids are connected.
  // Example:
  "Component Typescript": {
    "scope": "typescript,typescriptreact",
    "prefix": "compts",
    "body": [
      "import React from \"react\"",
      "",
      "export type ${1:ComponentName}Props = Readonly<{",
      "}>",
      "",
      "export const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = () => {",
      "  return (",
      "    <>",
      "      $0",
      "    </>",
      "  )",
      "}"
    ],
    "description": "Create a React component in Typescript"
  },
  "Component Unit Test Typescript": {
    "scope": "typescript,typescriptreact",
    "prefix": "comptestts",
    "body": [
      "import { render, screen } from \"@testing-library/react\"",
      "import React from \"react\"",
      "import { ${1:ComponentName} } from \"./${1:ComponentName}\"",
      "",
      "describe(\"${1:ComponentName}\", () => {",
      "  it(\"renders the component\", () => {",
      "    render(<${1:ComponentName} />)",
      "    $0",
      "    expect(screen.queryByText(\"foo\")).toBeInTheDocument()",
      "  })",
      "})"
    ],
    "description": "Create a unit test for the React component in Typescript"
  },
  "Component Storybook Typescript": {
    "scope": "typescript,typescriptreact",
    "prefix": "compstoryts",
    "body": [
      "import { ComponentStory, ComponentMeta } from \"@storybook/react\"",
      "import React from \"react\"",
      "import { ${1:ComponentName} } from \"./${1:ComponentName}\"",
      "",
      "export default {",
      "  title: \"${2:path}/${1:ComponentName}\",",
      "  component: ${1:ComponentName},",
      "} as ComponentMeta<typeof ${1:ComponentName}>",
      "",
      "const Template: ComponentStory<typeof ${1:ComponentName}> = (args) => (",
      "  <${1:ComponentName} {...args} />",
      ")",
      "",
      "export const Default = Template.bind({})",
      "Default.args = {}"
    ],
    "description": "Create a Storybook for the React component in Typescript"
  }
}