React Snippets

typescriptreact.json

{
  // for next, remix and solid index routes that uses the directory name for the component name
  "export default function": {
		"prefix": "edf",
		"body": [
			"export default function ${TM_DIRECTORY/^.+\\/(.*)$/${1:/pascalcase}/}() {",
			"\treturn(",
			"\t\t${0}",
			"\t)",
			"}"
		],
		"description": "Export default function component"
	},
  "mantine component": {
  	"prefix": "mc",
		"body": [
			"import { createStyles } from \"@mantine/core\";",
			"",
			"const useStyles = createStyles(theme => ({",
			"\t${2:css}: {",
			"\t\t// backgroundColor: theme.colors.gray[2],",
			"\t}",
			"}));",
			"",
			"interface ${1}Props {",
			"\tname: string;",
			"}",
			"",
			"export const ${1:ComponentName} = ({name}: $1Props) => {",
			"\tconst { classes } = useStyles();",
			"",
			"\treturn (",
			"\t\t<div className={classes.${2}}>",
			"\t\t\t${0}",
			"\t\t</div>",
			"\t)",
			"}",
		],
		"description": "Mantine component"
	}
}

JSON comments work fine in vscode