VSCode React snippets

readme.md

Follow instructions at the link provided to get to the user snippet creation file: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

Paste in the contents of vscode-react-snippets.json and you should be good to go :). Make edits as you like to fit your preferences.

vscode-react-snippets.json

{
	"Component": {
		"prefix": "cc",
		"body": [
			"import React from 'react';",
			"",
			"const ${1:ComponentName} = ({}) => {",
			"  return (",
			"    ${0:<div />}",
			"  );",
			"};",
			"",
			"export default ${1:ComponentName};",
			""
		],
		"description": "Create a React Functional Component"
	},
	"TS Component": {
		"prefix": "ctc",
		"body": [
			"import React from 'react';",
			"",
			"const ${1:ComponentName}: React.FC = ({}) => {",
			"  return (",
			"    ${0:<div />}",
			"  );",
			"};",
			""
		],
		"description": "Create a TypeScript React Functional Component"
	},
	"LifeOmic Styled TS Component": {
		"prefix": "csc",
		"body": [
			"import { GetClasses }  from '@lifeomic/chroma/typeUtils';",
			"import { makeStyles }  from '@lifeomic/chroma/styles';",
			"import React from 'react';",
			"",
			"const useStyles = makeStyles((theme) => ({",
			"  root: {}",
			"}));",
			"",
			"export type ${1:ComponentName}Classes = GetClasses<typeof useStyles>;",
			"",
			"interface ${1:ComponentName}Props {",
			"}",
			"",
			"const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ }) => {",
			"  const classes = useStyles();",
			"  return (",
			"    ${0:<div />}",
			"  );",
			"};",
			"",
			"export default ${1:ComponentName};",
			""
		],
		"description": "Create a LifeOmic Styled React Functional Component"
	},
	// hooks
	"useEffect": {
		"prefix": "ue",
		"body": [
			"React.useEffect(() => {",
			"  $0",
			"});"
		],
		"description": "Generates useEffect"
	},
	"useEffect unmount": {
		"prefix": "ueu",
		"body": [
			"React.useEffect(() => {",
			"  $2",
			"  return () => {",
			"    $1",
			"  };",
			"});",
			"$0",
		],
		"description": "Generates useEffect with an unmount"
	},
	"useState": {
		"prefix": "us",
		"body": [
			"const [$1, $2] = React.useState($3);",
			"$0"
		],
		"description": "Generates useState"
	}
}