snippets.json

{
"PolymorphicFunctionComponent": {
		"prefix": "fncpp",
		"description": "React Function Component (Polymorphic)",
		"body": [
			"import React from \"react\";",
			"",
			"interface PolymorphicProps<C extends React.ElementType> {",
			"\tas?: C",
			"}",
			"",
			"type I${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props<C extends React.ElementType> = PolymorphicProps<C> & Omit<React.ComponentPropsWithRef<C>, keyof PolymorphicProps<C>> & {",
			"\t/** your props here */",
			"}",
			"",
			"const ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/} = <C extends React.ElementType>({ as, ...props }) => {",
			"\tconst Component = as || 'div';",
			"",
			"\t// Do your stuff here,",
			"",
			"\treturn (",
			"\t\t<Component {...props}>",
			"\t\t\t{props.children}",
			"\t\t</Component>",
			"\t);",
			"}",
			"",
			"${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}.displayName = '${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}'",
			"",
			"export default ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/};",
		]
	},
	"FunctionComponent": {
		"prefix": "fncp",
		"description": "React Function Component",
		"body": [
			"import React, { FC, PropsWithChildren } from \"react\";",
			"",
			"interface I${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props { }",
			"",
			"const ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}: FC<PropsWithChildren<I${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props>> = (props) => {",
			"\t// Do your stuff here,",
			"",
			"\treturn ${0:null};",
			"}",
			"",
			"${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}.displayName = '${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}'",
			"",
			"export default ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/};",
		]
	},
	"FunctionComponent Ref": {
		"prefix": "fncpr",
		"description": "React Function Component with Ref",
		"body": [
			"import React, { forwardRef } from \"react\";",
			"",
			"interface I${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props extends React.DetailedHTMLProps<React.${2/(.*)/${1:/capitalize}/}HTMLAttributes<HTML${2/(.*)/${1:/capitalize}/}Element>, HTML${2/(.*)/${1:/capitalize}/}Element> { }",
			"",
			"const ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/} = forwardRef<HTML${2/(.*)/${1:/capitalize}/}Element, I${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}Props>((props, ref) => {",
			"\t// Do your stuff here,",
			"",
			"\treturn ${0:null};",
			"})",
			"",
			"${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}.displayName = '${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}'",
			"",
			"export default ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/};",
		]
	}
}