React + TS code snippets

typescriptreact.code-snippets

{
  "TS React FC": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "export interface ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props {",
      "  $2",
      "}",
      "",
      "export function $1({ $3 }: $1Props) {",
      "  $0",
      "}"
    ]
  },
  "TS React FC Default": {
    "scope": "typescriptreact",
    "prefix": "rfcd",
    "body": [
      "export interface ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props {",
      "  $2",
      "}",
      "",
      "export function $1({ $3 }: $1Props) {",
      "  $0",
      "}",
      "",
      "export default $1;"
    ]
  },
  "TS React FC Arrow": {
    "scope": "typescriptreact",
    "prefix": "rfca",
    "body": [
      "export interface ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props {",
      "  $2",
      "}",
      "",
      "export const $1 = ({ $3 }: $1Props) => {",
      "  $0",
      "};"
    ]
  },
  "TS React FC minimal": {
    "scope": "typescriptreact",
    "prefix": "rfcsimple",
    "body": [
      "export function ${1:${TM_FILENAME/(.*)\\..+$/$1/}}() {",
      "  $0",
      "}"
    ]
  },
  "TS React FC minimal arrow": {
    "scope": "typescriptreact",
    "prefix": "rfcsimple",
    "body": [
      "export const ${1:${TM_FILENAME/(.*)\\..+$/$1/}} = () => {",
      "  $0",
      "}"
    ]
  },
  "TS React FC forwardRef": {
    "scope": "typescriptreact",
    "prefix": "rfcf",
    "body": [
      "import { forwardRef } from 'react';",
      "",
      "export interface ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props {",
      "  className?: string;",
      "  $2",
      "};",
      "",
      "export const $1 = forwardRef<$3, $1Props>(function $1({ $4, ...rest }, ref) {",
      "  return <$0 ref={ref} {...rest} />;",
      "});"
    ]
  },
  "TS React hook": {
    "scope": "typescript",
    "prefix": "rh",
    "body": [
      "export function ${1:${TM_FILENAME/(.*)\\..+$/$1/}}() {",
      "  $0",
      "}"
    ]
  },
  "TS React Component Test": {
    "scope": "typescriptreact",
    "prefix": "rct",
    "body": [
      "import React from 'react';",
      "import { render, cleanup } from '@testing-library/react';",
      "import ${1:${TM_FILENAME/(.*)\\.test\\..+$/$1/}} from './$1';",
      "",
      "describe('$1 component', () => {",
      "  afterEach(cleanup);",
      "",
      "  test('$2', async () => {",
      "    const props = { $3 };",
      "    const result = render(<$1 {...props} />);",
      "",
      "    $0",
      "  });",
      "});"
    ]
  },
  "TS React Hook Test": {
    "scope": "typescript",
    "prefix": "rht",
    "body": [
      "import { renderHook, cleanup } from '@testing-library/react-hooks';",
      "import ${1:${TM_FILENAME/(.*)\\.test\\..+$/$1/}} from './$1';",
      "",
      "describe('$1 hook', () => {",
      "  afterEach(cleanup);",
      "",
      "  test('$2', async () => {",
      "    const { result } = renderHook(() => $1($3));",
      "",
      "    $0",
      "  });",
      "});"
    ]
  },
  "New MUI themed component": {
    "scope": "typescriptreact",
    "prefix": "rfcmui",
    "body": [
      "import * as React from 'react';",
      "import { makeStyles, Theme } from '@material-ui/core';",
      "",
      "export type ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props = {",
      "  children?: React.ReactNode;",
      "  $2",
      "};",
      "",
      "const useStyles = makeStyles<Theme, $1Props>(theme => ({",
      "  $3",
      "}));",
      "",
      "export function $1(props: $1Props) {",
      "  const classes = useStyles(props);",
      "  const { $4 } = props;",
      "",
      "  return $0;",
      "}"
    ]
  },
  "MUI styles": {
    "scope": "typescriptreact",
    "prefix": "muis",
    "body": [
      "const useStyles = makeStyles<Theme, ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props>(theme => ({",
      "  $0",
      "}));"
    ]
  },
  "Query hook": {
    "scope": "typescript",
    "prefix": "rqh",
    "body": [
      "import gql from 'graphql-tag';",
      "import { useQuery, QueryHookOptions } from '@apollo/react-hooks';",
      "",
      "export const $1 = gql`",
      "  query $1$2",
      "`;",
      "",
      "export type $1Result = {",
      "  $3",
      "};",
      "",
      "export type $1Variables = {",
      "  $4",
      "};",
      "",
      "export const ${TM_FILENAME/(.*)\\..+$/$1/} = (args: QueryHookOptions<$1Result, $1Variables> = {}) =>",
      "  useQuery<$1Result>($1, args);"
    ]
  },
  "Mutation hook": {
    "scope": "typescript",
    "prefix": "rmh",
    "body": [
      "import gql from 'graphql-tag';",
      "import { useMutation, MutationHookOptions } from '@apollo/react-hooks';",
      "",
      "export const $1 = gql`",
      "  mutation $1$2",
      "`;",
      "",
      "export type $1Result = {",
      "  $3",
      "};",
      "",
      "export type $1Variables = {",
      "  $4",
      "};",
      "",
      "export const ${TM_FILENAME/(.*)\\..+$/$1/} = (args: MutationHookOptions<$1Result, $1Variables> = {}) =>",
      "  useMutation<$1Result, $1Variables>($1, args);"
    ]
  }
}