VS Code User snippets for Typescript React

typescriptreact.json

{
	"React Functional Component": {
		"prefix": "crfc",
		"body": [
			"import React from 'react';",
			"",
			"interface ${1:${TM_FILENAME_BASE}}Props {}",
			"",
			"const ${1:${TM_FILENAME_BASE}}: React.FC<${1:${TM_FILENAME_BASE}}Props> = (props) => {",
			"",
			"    return (",
			"        <div>Lorem Ipsum</div>",
			"    )",
			"};",
			"",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Create a React Functional Component."
	},
	"MUI React Functional Component": {
		"prefix": "muirfc",
		"body": [
			"import React from 'react';",
			"",
			"// MATERIAL UI IMPORTS",
			"import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';",
			"",
			"const useStyles = makeStyles((theme: Theme) =>",
			"    createStyles({",
			"        root: {",
			"        padding: theme.spacing(3)",
			"    },",
			"}));",
			"",
			"interface ${1:${TM_FILENAME_BASE}}Props {}",
			"",
			"const ${1:${TM_FILENAME_BASE}}: React.FC<${1:${TM_FILENAME_BASE}}Props> = (props) => {",
			"    const classes = useStyles();",
			"",
			"    return (",
			"        <div className={classes.root}>Lorem Ipsum</div>",
			"    )",
			"};",
			"",
			"export default ${1:${TM_FILENAME_BASE}};"
		],
		"description": "Create a React Functional Component with Material UI."
	},
	"React useState": {
		"prefix": "useS",
		"body": [
			"const [${1}, set${1/(.*)/${1:/capitalize}/}] = React.useState($2);",
			"",
		],
		"description": "React useState"
	},
	"React useEffect": {
		"prefix": "useE",
		"body": [
			"React.useEffect(() => {",
			"    $1",
			"}, []);",
			"",
		],
		"description": "React useEffect"
	},
	"Comment Header": {
		"prefix": "comm",
		"body": [
			"/****************************************************************************/",
			"/* . $1                                                               */",
			"/****************************************************************************/",
			""
		],
		"description": "Comment Header"
	},
}