-
-
Save Klerith/887074ae1dbfe042dc9b8cb01a2b0db0 to your computer and use it in GitHub Desktop.
| { | |
| // 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" | |
| }, | |
| } |
| { | |
| // 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" | |
| }, | |
| } |
Recomiendo agregar la siguiente información en la línea 46 del archivo typescriptreact.json para agregar las props de children sin errores.
"interface Props {",
"children?: React.ReactNode | undefined;",
"}",
"",
"export const ${1:Name}Provider:FC: FC<Props> = ({ children }) => {",
"",
Hola, paso los snippets modificados. para considerar los INITIAL, props, reducer
{
// 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"
},
}
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
Muchas gracias, Maestro