ReactComponentSnippets.code-snippets

createContext.ts

//Save this file in some Workspace util package like "utils", it will be used alot.

import React from "react";
export interface ICreateContextOptions {
    /**
     * If `true`, React will throw if context is `null` or `undefined`
     * In some cases, you might want to support nested context, so you can set it to `false`
     */
    strict?: boolean;
    /**
     * Error message to throw if the context is `undefined`
     */
    errorMessage?: string;
    /**
     * The display name of the context
     */
    name?: string;
}
declare type CreateContextReturn<T> = [React.Provider<T>, () => T, React.Context<T>];
/**
 * Creates a named context, provider, and hook.
 *
 * @param options create context options
 */
export declare function createContext<ContextType>(options?: ICreateContextOptions): CreateContextReturn<ContextType>;
export {};

vs-code-snippets.json

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Function component": {
    "prefix": ["fcomp", "comp"],
    "body": [
      "import * as React from \"react\";",
      "",
      "type TProps = {};",
      "",
      "export const ${TM_FILENAME_BASE:COMPONENT}  = (p: TProps) => {",
      "const {} = p;",
      "return <div>${TM_FILENAME_BASE:COMPONENT} </div>;",
      "};"
    ],
    "description": "A for loop."
  },
  "Function component with context": {
    "prefix": ["compcontext", "cont", "comp"],
    "body": [
      "import * as React from \"react\"; ",
      "import { createContext } from \"./createContext\";",
      "",

      "type TProps = {};",
      "export const ${TM_FILENAME_BASE:COMPONENT} = (p: TUse${TM_FILENAME_BASE:COMPONENT}Args & TProps) => {",
      "const {} = p;",
      "const ctx = _use${TM_FILENAME_BASE:COMPONENT}(p);",
      "",
      "return <${TM_FILENAME_BASE:COMPONENT}Provider value={ctx}>${TM_FILENAME_BASE:COMPONENT}</${TM_FILENAME_BASE:COMPONENT}Provider>;",
      "};",
      "",
      "",
      "/* EXPORT BELOW CONTENT TO use${TM_FILENAME_BASE:COMPONENT}.ts once done */",
      "export type TUse${TM_FILENAME_BASE:COMPONENT}Args = {};",
      "export const _use${TM_FILENAME_BASE:COMPONENT} = (args: TUse${TM_FILENAME_BASE:COMPONENT}Args) => {",
      "    return {",
      "        ...args,",
      "    };",
      "};",
      "",
      "export type T${TM_FILENAME_BASE:COMPONENT}Context = ReturnType<typeof _use${TM_FILENAME_BASE:COMPONENT}>;",
      "const [${TM_FILENAME_BASE:COMPONENT}Provider, use${TM_FILENAME_BASE:COMPONENT}Context] = createContext<T${TM_FILENAME_BASE:COMPONENT}Context>",
      "    ({",
      "    name: \"${TM_FILENAME_BASE:COMPONENT}Context\",",
      "    errorMessage:",
      "        \"use${TM_FILENAME_BASE:COMPONENT}Context: `context` is undefined. Seems you forgot to wrap the panel parts in `<${TM_FILENAME_BASE:COMPONENT}Provider />` \", ",
      "});",
      "",
      "export { ${TM_FILENAME_BASE:COMPONENT}Provider, use${TM_FILENAME_BASE:COMPONENT}Context };"
    ]
  }
}