React TypeScript Snippets

typescriptreact.code-snippets

{
  "TS React FC": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React, { FC } from 'react';",
      "",
      "export interface ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props {",
      "  $2",
      "}",
      "",
      "const $1: FC<$1Props> = ({ $3 }) => {",
      "  $0",
      "};",
      "",
      "export default $1;"
    ]
  },
  "TS React Component Test": {
    "scope": "typescriptreact",
    "prefix": "rct",
    "body": [
      "import React from 'react';",
      "import { render } from '__test_utils__/components';",
      "import ${1:${TM_FILENAME/(.*)\\.test\\..+$/$1/}} from '../$1';",
      "",
      "describe('$1 component', () => {",
      "  it('$2', async () => {",
      "    const props = { $3 };",
      "    const result = render(<$1 {...props} />);",
      "",
      "    $0",
      "  });",
      "});"
    ]
  },
  "TS React Hook Test": {
    "scope": "typescript,typescriptreact",
    "prefix": "rht",
    "body": [
      "import { renderHook } from '@testing-library/react-hooks';",
      "import ${1:${TM_FILENAME/(.*)\\.test\\..+$/$1/}} from '../$1';",
      "",
      "describe('$1 hook', () => {",
      "  it('$2', async () => {",
      "    const { result } = renderHook(() => $1($3));",
      "",
      "    $0",
      "  });",
      "});"
    ]
  },
  "TS React MUI component": {
    "scope": "typescriptreact",
    "prefix": "rfcmui",
    "body": [
      "import React, { FC } from 'react';",
      "import { makeStyles, Theme } from '@material-ui/core';",
      "",
      "export interface ${1:${TM_FILENAME/(.*)\\..+$/$1/}}Props {",
      "  $2",
      "}",
      "",
      "const useStyles = makeStyles<Theme, $1Props>(theme => ({}));",
      "",
      "const $1: FC<$1Props> = props => {",
      "  const { $3 } = props",
      "  const classes = useStyles(props);",
      "  $0",
      "};",
      "",
      "export default $1;"
    ]
  }
}