VsCode snippets

typescriptreact.json

{
  "context-hook": {
    "prefix": "context",
    "body": [
      "import React, {useState, createContext, useContext} from 'react'",
      "",
      "interface ${1/(.*)/${1:/capitalize}/}ContextAPI {",
      "    $1: number",
      "    set${1/(.*)/${1:/capitalize}/}: (data: number) => void",
      "}",
      "type ${1/(.*)/${1:/capitalize}/}ProviderProps = {children: React.ReactNode}",
      "",
      "const ${1/(.*)/${1:/capitalize}/}Context = createContext<${1/(.*)/${1:/capitalize}/}ContextAPI|undefined>(undefined)",
      "",
      "export const ${1/(.*)/${1:/capitalize}/}Provider = ({children}: ${1/(.*)/${1:/capitalize}/}ProviderProps) => {",
      "    const [$1, set${1/(.*)/${1:/capitalize}/}] = useState(0)",
      "    const value = {$1, set${1/(.*)/${1:/capitalize}/}}",
      "    return <${1/(.*)/${1:/capitalize}/}Context.Provider value={value}>{children}</${1/(.*)/${1:/capitalize}/}Context.Provider>",
      "}",
      "",
      "export function use${1/(.*)/${1:/capitalize}/}() {",
      "    const context = useContext(${1/(.*)/${1:/capitalize}/}Context)",
      "    if (context === undefined) {",
      "        throw new Error('use${1/(.*)/${1:/capitalize}/} must be used within a ${1/(.*)/${1:/capitalize}/}Provider')",
      "    }",
      "    return context",
      "}",
      ""
    ],
    "description": "Creates React context hook blueprint"
  }
}

gist.mp4

installation: Cmd+shift+P -> "Preferences: configure user snippets" -> "New global snippets file"

Updated gist: createContext with initial undefined value. Otherwise context === undefined check doesn't make sense.