Typescript React Function Component

typescriptreact.json

// file->prefrences -> Configure User Snippets -> SEARCH (typescriptreact.json) -> Add the below code

"Typescript React Function Component": {
	"prefix": "rh",
	"body": [
		"import React from 'react'",
		"",
		"interface ${TM_FILENAME_BASE}Props {",
		"$1",
		"}",
		"",
		"export const $TM_FILENAME_BASE: React.FC<${TM_FILENAME_BASE}Props> = ({ $2}) => {",
		"\treturn (",
		"\t\t<>$3</>",
		"\t);",
		"}"
	],
	"description": "Typescript React Function Component"
}

// Pascalcase sentence for TM_FILEAME_BASE
"Typescript React Function Component": {
	"prefix": "rh",
	"body": [
		"import React from 'react'",
		"",
		"interface ${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g}Props {",
		"$1",
		"}",
		"",
		"export const ${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g}: React.FC<${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g}Props> = ({ $2}) => {",
		"\treturn (",
		"\t\t<>$3</>",
		"\t);",
		"}"
	],
	"description": "Typescript React Function Component"
}

// Complete Syntax
"Typescript React Function Component": {
	"prefix": "rh",
	"body": [
		"import React from 'react'",
		"",
		"interface ${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g}Props {",
		"$1",
		"}",
		"",
		"const ${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g}: React.FC<${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g}Props> = ({ $2}) => {",
		"\treturn (",
		"\t\t<div>${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g} Page</div>",
		"\t);",
		"}",
		"",
		"export default ${TM_FILENAME_BASE/(^\\w+)|(\\w+)|(-)/${1:/pascalcase}${3:+ }${2:/downcase}/g};"
	],
	"description": "Typescript React Function Component"
}