Scribd
Upload
50 views1 page

React Typescript Snippets

This document contains code snippets for React functional components with different configurations: a basic component, a component with props, and a component with props and children. It also includes a code snippet for the React useState hook.

Uploaded by

rjcywlatqhjcvvefab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
50 views1 page

React Typescript Snippets

This document contains code snippets for React functional components with different configurations: a basic component, a component with props, and a component with props and children. It also includes a code snippet for the React useState hook.

Uploaded by

rjcywlatqhjcvvefab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

{

"React functional component": {


"prefix": "rfc",
"body": [
"const $TM_FILENAME_BASE = () => {",
"return <div>$TM_FILENAME_BASE</div>;",
"};",
"",
"export default $TM_FILENAME_BASE;"
]
},
"React functional component with props": {
"prefix": "rfcp",
"body": [
"interface ${TM_FILENAME_BASE}Props {",
"\t$0",
"};",
"",
"const $TM_FILENAME_BASE = (props: ${TM_FILENAME_BASE}Props) =>
{",
"return <div>$TM_FILENAME_BASE</div>;",
"};",
"",
"export default $TM_FILENAME_BASE;"
]
},
"React functional component with props and children": {
"prefix": "rfcpc",
"body": [
"import { ReactNode } from \"react\"",
"",
"interface ${TM_FILENAME_BASE}Props {",
"\tchildren: ReactNode;",
"\t$0",
"};",
"",
"const $TM_FILENAME_BASE = ({ children }: $
{TM_FILENAME_BASE}Props) => {",
"return <div>$TM_FILENAME_BASE</div>;",
"};",
"",
"export default $TM_FILENAME_BASE;"
]
},
"React useState": {
"prefix": "useStateSnippet",
"body" : [
"const [${1:value}, set${1/(.*)/${1:/capitalize}/}] =
useState<${3:Type}>(${2:initialValue});"
]
}
}

You might also like