TSX Snippets VSCode

typescriptreact.json

{
	// https://snippet-generator.app/
	"React component": {
		"prefix": "rcomp",
		"body": [
			"type ${1:Component}Props = {",
			"",
			"}",
			"",
			"export const ${1:Component} = (props: ${1:Component}Props): JSX.Element | null => {",
			"",
			"    return (",
			"        <div>",
			"            {\"${1:Component}\"}",
			"        </div>",
			"    )",
			"}"
		],
		"description": ""
	},
	"Generic React Component": {
		"prefix": "grcomp",
		// Beware, use `function` instead of arrow to disambiguate
		// <T>, otherwise we get a JSX error.
		"body": [
			"type ${1:Component}Props<T> = {",
			"",
			"}",
			"",
			"export const ${1:Component} = function<T>(props: ${1:Component}Props<T>): JSX.Element | null {",
			"",
			"    return (",
			"        <div>",
			"            {\"${1:Component}\"}",
			"        </div>",
			"    )",
			"}"
		],
		"description": ""
	}
}