Scaffold context providers quickly. Name the file `use<Name>` | Created using SnippetStudio

typescriptreact.code-snippets

{
  "context-provider": {
    "prefix": "context-provider",
    "body": [
      "",
      "import React, { createContext, useContext, type PropsWithChildren } from \"react\";",
      "",
      "type ${1:${TM_FILENAME_BASE/(?:use)?(.*)/${1:/capitalize}/}}Type = {",
      "  $4",
      "}",
      "",
      "const $1 = createContext<$1Type>($5);",
      "",
      "export function $1Provder({ children }: PropsWithChildren) {",
      "  $6",
      "",
      "  return (",
      "    <$1.Provider value={$7}>",
      "      {children}",
      "    </$1.Provider>",
      "  );",
      "}",
      "",
      "export function ${2:$TM_FILENAME_BASE}(): $1Type {",
      "  const context = useContext($1);",
      "  if (!context) {",
      "    throw new Error(\"$2 must be used within an $1Provider\");",
      "  }",
      "  return context;",
      "};",
      ""
    ],
    "description": "The Context Provider pattern in React allows you to share state or functions across a component tree without passing props manually at every level. It wraps components in a provider that supplies a context value, which child components can consume",
    "scope": "typescriptreact"
  }
}