Visual Studio Code Snippet for ReactJS

snippets.json

{
  "Console Log": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "cl",
    "body": ["console.log($1);"]
  },
  "Console Warn": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "cw",
    "body": ["console.warn($1);"]
  },
  "Console Error": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "ce",
    "body": ["console.error($1);"]
  },
  "React useState": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "us",
    "body": ["const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState<$2>($3)"]
  },
  "React useEffect": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "ue",
    "body": ["useEffect(() => {", "  $1", "}, [$2]);"]
  },
  "React useCallback": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "ucb",
    "body": ["useCallback(() => {", "  $1", "}, [$2]);"]
  },
  "React async useCallback": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "aucb",
    "body": ["useCallback(async() => {", "  $1", "}, [$2]);"]
  },
  "React useMemo": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "umm",
    "body": ["useMemo(() => {", "  $1", "}, [$2]);"]
  },
  "Async React Function Component": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "arjsfc",
    "body": [
      "const $1 = async () => {",
      "  return <>$2</>;",
      "};",
      "",
      "export default $1;"
    ]
  },
  "Async React Function Component with Props": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "arjsfcp",
    "body": [
      "interface $1Props {}",
      "",
      "const $1 = async ({}: $1Props) => {",
      "  return <>$2</>;",
      "};",
      "",
      "export default $1;"
    ]
  },
  "React Function Component": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "rjsfc",
    "body": [
      "const $1 = () => {",
      "  return <>$2</>;",
      "};",
      "",
      "export default $1;"
    ]
  },
  "React Function Component with Props": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "rjsfcp",
    "body": [
      "type $1Props = {}",
      "",
      "const $1 = ({}: $1Props) => {",
      "  return <>$2</>;",
      "};",
      "",
      "export default $1;"
    ]
  },
  "React Context": {
    "scope": "typescriptreact",
    "prefix": "rjctx",
    "body": [
      "import { ReactNode, createContext, useState, useContext } from 'react';",
      "",
      "type $1ContextProps = {",
      "  children: ReactNode",
      "};",
      "",
      "type $1Context = { someKey: string; };",
      "",
      "const initial$1Context: $1Context = {",
      "  someKey: 'someValue',",
      "};",
      "const ${1/(.*)/${1:/downcase}/}Context =  createContext<$1Context>(initial$1Context);",
      "",
      "const $1ContextProvider = ({ children }: $1ContextProps) => {",
      "  const [someKey] = useState(initial$1Context.someKey);",
      "  return (",
      "    <${1/(.*)/${1:/downcase}/}Context.Provider",
      "      value={{",
      "        someKey,",
      "      }}>",
      "      {children}",
      "    </${1/(.*)/${1:/downcase}/}Context.Provider>",
      "  );",
      "};",
      "",
      "export const use$1Context = () => useContext(${1/(.*)/${1:/downcase}/}Context);",
      "",
      "export default $1ContextProvider;",
    ]
  }
}