Create React.FC snippet for VSCode

javascriptreact.json

{
	"New React FC": {
		"prefix": "importReact",
		"body": [
			"import React from \"react\";",
			// "import \"./${1:$TM_FILENAME_BASE}Styles\";",
			// "import \"./${1:$TM_FILENAME_BASE}.${0:css}\";",
			"import \"./${1:$TM_FILENAME_BASE}.${0:less}\";",
			// "import \"./${1:$TM_FILENAME_BASE}.${0:sass}\";",
			// "import \"./${1:$TM_FILENAME_BASE}.${0:scss}\";",
			"",
			"const ${1:$TM_FILENAME_BASE} = () => {",
			"  return <>${1:$TM_FILENAME_BASE} is ready</>;",
			"};",
			"",
			"export default ${1:$TM_FILENAME_BASE};",
			""
		],
		"description": "Create a new React.FC with export default sintax",
	},
	"React FC export default snippet for index.tsx": {
		"prefix": "exportDefault",
		"body": "export { default } from \"./${1:${TM_DIRECTORY/^.+\\/(.*)$/$1/}}\";\n",
		"description": "Create a new React.FC with export default sintax",
	},
	"React FC export module of default sub items snippet for index.tsx": {
		"prefix": "exportSubmodule",
		"body": "export { default as ${1:Item} } from \"./${1:Item}\";\n",
		"description": "Create a module of React.FC with export default sintax",
	},
}

typescript.json

{
	"Create type definition": {
		"prefix": "typedefinition",
		"body": [
			"/* eslint-disable @typescript-eslint/no-unused-vars */",
			"/// <reference types=\"react-scripts\" />",
			"",
			"namespace ${1:Models} {",
			"  interface ${2:${TM_FILENAME_BASE/(.*)([.][d])/$1/}} {",
			"    ${0}",
			"  }",
			"}\n"
		],
		"description": "Create an @type for React Context or Model",
	},
	"Create networking hook": {
		"prefix": "genericApiCrud",
		"body": [
			"import { useCallback } from \"react\";",
			"import api from \"shared/utils/api\";",
			"",
			"export function useGet${1:${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}}s() {",
			"  return useCallback(async <O extends Object>(params?: O, headers?: O) => {",
			"    return await api.get${2}(`/${TM_FILENAME_BASE}s/`, { params, headers });",
			"  }, []);",
			"}",
			"",
			"export function useGet${1:${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}}() {",
			"  return useCallback(async <O extends Object>(id: string, params?: O, headers?: O) => {",
			"    return await api.get${2}(`/${TM_FILENAME_BASE}s/\\${id\\}/`, { params, headers });",
			"  }, []);",
			"}",
			"",
			"export function usePost${1:${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}}() {",
			"  return useCallback(async <O extends Object>(body?: O, params?: O, headers?: O) => {",
			"    await api.post${2}(`/${TM_FILENAME_BASE}s/`, body, { params, headers });",
			"  }, []);",
			"}",
			"",
			"export function usePatch${1:${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}}() {",
			"  return useCallback(async <O extends Object>(id: string, body?: O, params?: O, headers?: O) => {",
			"    await api.patch${2}(`/${TM_FILENAME_BASE}s/\\${id\\}/`, body, { params, headers });",
			"  }, []);",
			"}",
			"",
			"export function useDelete${1:${TM_FILENAME_BASE/(.*)$/${1:/capitalize}/}}() {",
			"  return useCallback(async <O extends Object>(id: string, params?: O, headers?: O) => {",
			"    await api.delete${2}(`/${TM_FILENAME_BASE}s/\\${id\\}/`, { params, headers });",
			"  }, []);",
			"}",
			""
		],
		"description": "Create a react hook collection for networking",
	}
}

typescriptreact.json

{
	"New React FC": {
		"prefix": "importReact",
		"body": [
			"import React from \"react\";",
			// "import \"./${1:$TM_FILENAME_BASE}Styles\";",
			// "import \"./${1:$TM_FILENAME_BASE}.${0:css}\";",
			"import \"./${1:$TM_FILENAME_BASE}.${0:less}\";",
			// "import \"./${1:$TM_FILENAME_BASE}.${0:sass}\";",
			// "import \"./${1:$TM_FILENAME_BASE}.${0:scss}\";",
			"",
			"interface Props {}",
			"const ${1:$TM_FILENAME_BASE}: React.FC<Props> = () => {",
			"  return <>${1:$TM_FILENAME_BASE} is ready</>;",
			"};",
			"",
			"export default ${1:$TM_FILENAME_BASE};",
			""
		],
		"description": "Create a new React.FC with export default sintax",
	},
	"React FC export default snippet for index.tsx": {
		"prefix": "exportDefault",
		"body": "export { default } from \"./${1:${TM_DIRECTORY/^.+\\/(.*)$/$1/}}\";\n",
		"description": "Create a new React.FC with export default sintax",
	},
	"React FC export module of default sub items snippet for index.tsx": {
		"prefix": "exportSubmodule",
		"body": "export { default as ${1:Item} } from \"./${1:Item}\";\n",
		"description": "Create a module of React.FC with export default sintax",
	},
	"Create React Context": {
		"prefix": "createContext",
		"body": [
			"import React, { createContext } from \"react\";",
			"",
			"const ${0:$TM_FILENAME_BASE} = createContext({} as Contexts.${TM_FILENAME_BASE/(.*)([Context]){1}/$0/});",
			"",
			"interface Props {};",
			"export const ${TM_FILENAME_BASE/(.*)([Context]){1}/$0/}Provider: React.FC<Props> = ({ children }) => {",
			"  return (",
			"    <${TM_FILENAME_BASE}.Provider value={{ $1 }}>",
			"      {children}",
			"    </${TM_FILENAME_BASE}.Provider>",
			"  );",
			"};",
			"",
			"export default ${0:$TM_FILENAME_BASE};"
		],
		"description": "Create a new React.FC with export default sintax",
	},
}