Created
February 2, 2022 22:52
-
-
Save Klerith/887074ae1dbfe042dc9b8cb01a2b0db0 to your computer and use it in GitHub Desktop.
React - Context 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
| { | |
| // Place your snippets for typescript 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" | |
| // } | |
| "React context index file": { | |
| "prefix": "reactcontext-index", | |
| "body": [ | |
| "", | |
| "", | |
| "export * from './${1:Name}Context';", | |
| "export * from './${1:Name}Provider';", | |
| "export * from './${2:name}Reducer';" | |
| ], | |
| "description": "React context index file" | |
| }, | |
| "React custom Reducer": { | |
| "prefix": "reactcontext-reducer", | |
| "body": [ | |
| "import { ${1:Name}State } from './';", | |
| "", | |
| "", | |
| "type ${1:Name}ActionType = ", | |
| " | { type: '[${1:Name}] - ${2:ActionName}' } ", | |
| "", | |
| "", | |
| "export const $3${1:Name}Reducer = ( state: ${1:Name}State, action: ${1:Name}ActionType ): ${1:Name}State => {", | |
| "", | |
| " switch (action.type) {", | |
| " case '[${1:Name}] - ${2:ActionName}':", | |
| " return {", | |
| " ...state,", | |
| " }", | |
| "", | |
| " default:", | |
| " return state;", | |
| " }", | |
| "", | |
| "}", | |
| ], | |
| "description": "React custom Context reducer" | |
| }, | |
| } |
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
| { | |
| // 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" | |
| // } | |
| "React custom Context": { | |
| "prefix": "reactcontext", | |
| "body": [ | |
| "import { createContext } from 'react';", | |
| "", | |
| "", | |
| "interface ContextProps {", | |
| " ${2:prop1}: ${3:boolean};", | |
| "}", | |
| "", | |
| "", | |
| "export const ${1:Name}Context = createContext({} as ContextProps );" | |
| ], | |
| "description": "React custom Context with props" | |
| }, | |
| "React custom Provider": { | |
| "prefix": "reactprovider", | |
| "body": [ | |
| "import { FC, useReducer } from 'react';", | |
| "import { ${1:Name}Context, ${1:Name}Reducer } from './';", | |
| "", | |
| "export interface ${1:Name}State {", | |
| " ${2:property}: boolean;", | |
| "}", | |
| "", | |
| "", | |
| "const ${1:Name}_INITIAL_STATE: ${1:Name}State = {", | |
| " ${2:property}: false,", | |
| "}", | |
| "", | |
| "", | |
| "export const ${1:Name}Provider:FC = ({ children }) => {", | |
| "", | |
| " const [state, dispatch] = useReducer( ${1:Name}Reducer , ${1:Name}_INITIAL_STATE );", | |
| "", | |
| " return (", | |
| " <${1:Name}Context.Provider value={{", | |
| " ${2:property}: false", | |
| " }}>", | |
| " { children }", | |
| " </${1:Name}Context.Provider>", | |
| " )", | |
| "};" | |
| ], | |
| "description": "React custom Provider" | |
| }, | |
| } |
Aca esta mas completo con los aportes de los companeros
{
// 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"
// }
"React context index file": {
"prefix": "reactcontext-index",
"body": [
"",
"",
"export * from './${1:Name}Context';",
"export * from './${1:Name}Provider';",
"export * from './${2:name}/minusReducer';"
],
"description": "React context index file"
},
"React custom Reducer": {
"prefix": "reactcontext-reducer",
"body": [
"import { ${1:Name}State } from './';",
"",
"",
"type ${1:Name}ActionType = ",
" | { type: '[${1:Name}] - ${2:ActionName}' } ",
"",
"",
"export const ${1:Name}Reducer = ( state:${1:Name}State, action: ${1:Name}ActionType): ${1:Name}State => {",
"",
" switch (action.type) {",
" case '[${1:Name}] - ${2:ActionName}':",
" return {",
" ...state,",
" }",
"",
" default:",
" return state;",
"",
" }",
"",
"}"
],
"description": "React custom Context reducer"
},
"React custom Context": {
"prefix": "reactcontext",
"body": [
"import { createContext } from 'react';",
"",
"",
"interface ContextProps {",
" ${2:prop1}: ${3:boolean};",
"}",
"",
"",
"export const ${1:Name}Context = createContext({} as ContextProps );"
],
"description": "React custom Context with props"
},
"React custom Provider": {
"prefix": "reactprovider",
"body": [
"import React, { FC, useReducer } from 'react';",
"import { ${1:Name}Context, ${1:Name}Reducer } from './';",
"",
"",
"export interface ${1:Name}State {",
" ${2:property}: boolean;",
"}",
"",
"",
"const ${1:Name}_INITIAL_STATE: ${1:Name}State = {",
" ${2:property}: false,",
"}",
"",
"",
"interface Props {",
"children?: React.ReactNode | undefined;",
"}",
"",
"",
"export const ${1:Name}Provider:FC<Props> = ({ children }) => {",
"",
" const [state, dispatch] = useReducer( ${1:Name}Reducer , ${1:Name}_INITIAL_STATE );",
"",
" return (<${1:Name}Context.Provider value={{",
" ...state",
" }}>",
" { children }",
" </${1:Name}Context.Provider>",
" )",
"};"
],
"description": "React custom Provider"
}
}
Genial! Gracias por el aporte
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hola, paso los snippets modificados. para considerar los INITIAL, props, reducer
{$0 for the final cursor position, and $ {1:label}, ${2:another} for placeholders. Placeholders with the$0 for the final cursor position, and $ {1:label}, ${2:another} for placeholders. Placeholders with the
// Place your snippets for typescript 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,
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"React context index file": {
"prefix": "reactcontext-index",
"body": [
"",
"",
"export * from './${1:Name}Context';",
"export * from './${1:Name}Provider';",
"export * from './${2:name}Reducer';"
],
"description": "React context index file"
},
"React custom Reducer": {
"prefix": "reactcontext-reducer",
"body": [
"import { ${1:Name}State } from './';",
"",
"",
"type ${1:Name}ActionType = ",
" | { type: '[${1:Name}] - ${3:ActionName}' } ",
"",
"",
"export const ${2:Name}Reducer = ( state: ${1:Name}State, action: ${1:Name}ActionType ): ${1:Name}State => {",
"",
" switch (action.type) {",
" case '[${1:Name}] - ${3:ActionName}':",
" return {",
" ...state,",
" }",
"",
" default:",
" return state;",
" }",
"",
"}",
],
"description": "React custom Context reducer"
},
// 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,
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"React custom Context": {
"prefix": "reactcontext",
"body": [
"import { createContext } from 'react';",
"",
"",
"interface ContextProps {",
" ${2:prop1}: ${3:boolean};",
"}",
"",
"",
"export const ${1:Name}Context = createContext({} as ContextProps );"
],
"description": "React custom Context with props"
},
"React custom Provider": {
"prefix": "reactprovider",
"body": [
"import { ReactNode, FC, useReducer } from 'react';",
"import { ${1:Name}Context, ${2:Name}Reducer } from './';",
"",
"interface Props {",
"children?: ReactNode | undefined;",
"}",
"",
"export interface ${1:Name}State {",
" ${3:property}: boolean;",
"}",
"",
"",
"const ${4:Name}_INITIAL_STATE: ${1:Name}State = {",
" ${3:property}: false,",
"}",
"",
"",
"export const ${1:Name}Provider:FC = ({ children }) => {",
"",
" const [state, dispatch] = useReducer( ${2:Name}Reducer , ${4:Name}_INITIAL_STATE );",
"",
" return (",
" <${1:Name}Context.Provider value={{",
" ...state",
" }}>",
" { children }",
" </${1:Name}Context.Provider>",
" )",
"};"
],
"description": "React custom Provider"
},
}