tailchat/.vscode/react.code-snippets

// Place your Client 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:
// "Print to console": {
// 	"scope": "javascript,typescript",
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }
{
  "React functional component": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React from 'react'",
      "interface $1Props {",
      "  $2",
      "}",
      "export const $1 = (props: $1Props) => {",
      "  const { $3 } = props;",
      "",
      "  return null;",
      "};",
      "$1.displayName = '$1';"
    ]
  },
  "React memo functional component": {
    "scope": "typescriptreact",
    "prefix": "rmc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "export const $1: React.FC<$1Props> = React.memo((props) => {",
      "  const { $3 } = props;",
      "",
      "  return null;",
      "});",
      "$1.displayName = '$1';"
    ]
  },
  "React memo functional component pure": {
    "scope": "typescriptreact",
    "prefix": "rmcp",
    "body": [
      "import React from 'react';",
      "",
      "export const ${1:Component}: React.FC = React.memo(() => {",
      "  return null;",
      "});",
      "$1.displayName = '$1';"
    ]
  }
}