React snippet for Function Component in TS

Let us face the fact. We can’t live without React. React has made our lives super easy. Making a web app is child’s play these days. But a lot of boilerplate does make life boring at times. One of those is setting up a react function component every time you want to add a new feature to your product.

Here is a simple snippet that allows you to save some time typing. In VS Code go to Settings and find Configure User Snippets and then to typescriptreact.json

A normal TS — React FC

"TS React Function Component": {
  "prefix": "tsrfc",
  "body": [
   "import React from 'react';",
   "",
   "const ${1}: React.FC = () => {",
   "\treturn <div>${1}</div>;",
   "};",
   "",
   "export default ${1};"
  ],
  "description": "React Function Component in TypeScript",
 },

A TS — React FC with Props

"TS React Function Component With Props": {
  "prefix": "tsrfcwp",
  "body": [
   "import React from 'react';",
   "",
   "type ${1}Props = {",
   "\tlabel: string",
   "};",
   "",
   "const ${1}: React.FC<${1}Props> = ({ label }) => {",
   "\treturn <div>{label}</div>;",
   "};",
   "",
   "export default ${1};"
  ],
  "description": "React Function Component with Props in TypeScript",
 },

A TS — React FC with Children

"TS React Function Component With Children": {
  "prefix": "tsrfcwc",
  "body": [
   "import React, { PropsWithChildren } from 'react';",
   "",
   "",
   "const ${1}: React.FC<PropsWithChildren> = ({ children }) => {",
   "\treturn <div>{children}</div>;",
   "};",
   "",
   "export default ${1};"
  ],
  "description": "React Function Component with Children in TypeScript",
 }

And here is what it looks like —

Happy Coding!