react.code-snippets

{
  "Component.js": {
    "scope": "javascript,javascriptreact",
    "prefix": ["rfc", "Component"],
    "description": "Create a React Functional Component",
    "body": [
      "import PropTypes from 'prop-types';",
      "import React from 'react'",
      "",
      "export default function ${1:$TM_FILENAME_BASE}(props) {",
      "  return <div $2{...props} />;",
      "}",
      "",
      "${1:$TM_FILENAME_BASE}.propTypes = {",
      "  children: PropTypes.node,",
      "};",
      "",
      "${1:$TM_FILENAME_BASE}.defaultProps = {",
      "  children: undefined,",
      "};",
      ""
    ]
  },
  "Component.ts": {
    "scope": "typescript,typescriptreact",
    "prefix": ["rfc", "Component"],
    "description": "Create a React Functional Component",
    "body": [
      "import {HTMLAttributes} from 'react';",
      "",
      "type Props = HTMLAttributes<HTMLDivElement> & {};",
      "",
      "export default function ${1:$TM_FILENAME_BASE}(props: Props) {",
      "  return <div $2{...props} />;",
      "}",
      ""
    ]
  },
  "RefComponent.js": {
    "scope": "javascript,javascriptreact",
    "prefix": ["rfcr", "RefComponent"],
    "description": "Create a React functional component that forwards a reference.",
    "body": [
      "import PropTypes from 'prop-types';",
      "import React, {forwardRef} from 'react';",
      "",
      "const ${1:$TM_FILENAME_BASE} = forwardRef(({",
      "  component: Element,",
      "  children,",
      "  ...props",
      "}, ref) => {",
      "  return <Element ref={ref} $3{...props}>{children}</Element>;",
      "});",
      "",
      "${1:$TM_FILENAME_BASE}.displayName = '${1:$TM_FILENAME_BASE}';",
      "",
      "export default ${1:$TM_FILENAME_BASE};",
      "",
      "${1:$TM_FILENAME_BASE}.propTypes = {",
      "  children: PropTypes.node.isRequired,",
      "  component: PropTypes.elementType,",
      "};",
      "",
      "${1:$TM_FILENAME_BASE}.defaultProps = {",
      "  component: 'span',",
      "};",
      ""
    ]
  },
  "RefComponent.ts": {
    "scope": "typescript,typescriptreact",
    "prefix": ["rfcr", "RefComponent"],
    "description": "Create a React functional component that forwards a reference.",
    "body": [
      "import {HTMLAttributes, forwardRef} from 'react';",
      "",
      "type Props = HTMLAttributes<HTMLDivElement> & {};",
      "",
      "const ${1:$TM_FILENAME_BASE} = forwardRef<HTMLDivElement, Props>((props, ref) => {",
      "  return <div ref={ref} $2{...props} />;",
      "});",
      "",
      "${1:$TM_FILENAME_BASE}.displayName = '${1:$TM_FILENAME_BASE}';",
      "",
      "export default ${1:$TM_FILENAME_BASE};",
      ""
    ]
  },
  "ExComponent.js": {
    "scope": "javascript,javascriptreact",
    "prefix": ["rfce", "ExComponent"],
    "description": "Create an extendable React Functional Component",
    "body": [
      "import PropTypes from 'prop-types';",
      "import React from 'react'",
      "",
      "export default function ${1:$TM_FILENAME_BASE}({",
      "  component: Element,",
      "  children,",
      "  ...props",
      "}) {",
      "  return <Element $2{...props}>{children}</Element>;",
      "}",
      "",
      "${1:$TM_FILENAME_BASE}.propTypes = {",
      "  children: PropTypes.node.isRequired,",
      "  component: PropTypes.elementType,",
      "};",
      "",
      "${1:$TM_FILENAME_BASE}.defaultProps = {",
      "  component: 'span',",
      "};",
      ""
    ]
  },
  "useReactHook": {
    "scope": "javascript,javascriptreact,typescript,typescriptreact",
    "prefix": ["rh", "ReactHook", "Hook"],
    "description": "Create custom React Hook",
    "body": [
      "import {useCallback} from 'react';",
      "",
      "export default function ${1:$TM_FILENAME_BASE}() {",
      "  return useCallback(() => {",
      "    $1",
      "  }, []);",
      "}",
      ""
    ]
  }
}