Created
January 2, 2023 10:33
-
-
Save rudfoss/332197ebfc9f207002d9eef8454f58a2 to your computer and use it in GitHub Desktop.
TypeScript code snippets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "React Component": { | |
| "prefix": "react-component", | |
| "description": "Creates a react function component without props", | |
| "body": [ | |
| "import React from \"react\"", | |
| "", | |
| "export interface ${1:name}Props {", | |
| "\t${0}", | |
| "}", | |
| "", | |
| "const ${1:name}Component = (props: ${1:name}Props) => {", | |
| "}", | |
| "", | |
| "export const ${1:name} = React.memo(${1:name}Component)" | |
| ], | |
| "scope": "typescriptreact" | |
| }, | |
| "React Propless Component": { | |
| "prefix": "react-component-propless", | |
| "description": "Creates a react function component without props", | |
| "body": ["import React from \"react\"", "", "export const ${1:name} = () => (${0})"], | |
| "scope": "typescriptreact" | |
| }, | |
| "Export default": { | |
| "prefix": "export-default", | |
| "description": "Creates a default export for an index file", | |
| "body": ["export { default } from \"./${1:name}\""], | |
| "scope": "typescript" | |
| }, | |
| "React Context": { | |
| "prefix": "react-context", | |
| "description": "Creates a context base including default usage hook", | |
| "body": [ | |
| "import { createContext } from \"react\"", | |
| "", | |
| "import { createContextUser } from \"@react-structure/utils/react/createContextUser\"", | |
| "", | |
| "interface ${1:name}ContextProps {", | |
| "\t${0}", | |
| "}", | |
| "", | |
| "// eslint-disable-next-line @typescript-eslint/no-explicit-any", | |
| "const ${1:name}Context = createContext<${1:name}ContextProps>(undefined as any)", | |
| "${1:name}Context.displayName = \"${1:name}Context\"", | |
| "export const use${1:name} = createContextUser(${1:name}Context)" | |
| ] | |
| }, | |
| "React Service": { | |
| "prefix": "react-service", | |
| "description": "Creates a react service context with a provider", | |
| "body": [ | |
| "import React, { createContext } from \"react\"", | |
| "", | |
| "import { createContextUser } from \"@fido/utils/react/createContextUser\"", | |
| "", | |
| "interface ${1:name}ServiceProps {", | |
| "\t${0}", | |
| "}", | |
| "", | |
| "const ${1:name}Service = createContext<${1:name}ServiceProps | undefined>(undefined)", | |
| "${1:name}Service.displayName = \"${1:name}Service\"", | |
| "export const use${1:name}Service = createContextUser(${1:name}Service)", | |
| "", | |
| "export interface Provide${1:name}ServiceProps {", | |
| "\tchildren: React.ReactNode", | |
| "}", | |
| "", | |
| "const Provide${1:name}ServiceComponent = ({children}: Provide${1:name}ServiceProps) => {", | |
| "\treturn (", | |
| "\t\t<${1:name}Service.Provider value={}>{children}</${1:name}Service.Provider>", | |
| "\t)", | |
| "}", | |
| "", | |
| "export const Provide${1:name}Service = React.memo(Provide${1:name}ServiceComponent)" | |
| ], | |
| "scope": "typescriptreact" | |
| }, | |
| "React Context Provider": { | |
| "prefix": "react-context-provider", | |
| "description": "Creates a react context provider with automatic children support", | |
| "body": [ | |
| "import React from \"react\"", | |
| "", | |
| "export interface ${1:name}ProviderProps {", | |
| "\tchildren: React.ReactNode", | |
| "}", | |
| "", | |
| "const ${1:name}ProviderComponent = ({children}: ${1:name}ProviderProps) => {", | |
| "\t${0}", | |
| "\treturn (", | |
| "\t\t<${1:name}Context.Provider value={}>{children}</${1:name}Context.Provider>", | |
| "\t)", | |
| "}", | |
| "", | |
| "export const ${1:name}Provider = React.memo(${1:name}ProviderComponent)" | |
| ], | |
| "scope": "typescriptreact" | |
| }, | |
| "Zod Schema": { | |
| "prefix": "zod-schema", | |
| "description": "Define a Zod schema with type inferrence", | |
| "body": [ | |
| "import { z } from \"nestjs-zod/z\"", | |
| "", | |
| "export const Z${1:name} = z.${0}", | |
| "export type ${1:name} = z.infer<typeof Z${1:name}>" | |
| ], | |
| "scope": "typescript" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment