DEV Community

Daniel Bellmas
Daniel Bellmas

Posted on

React Typescript Snippets

If you too are tired of typing the same code when creating a new component in react than VS Code provides a cool solution: Code snippets πŸ”₯.

Here are two snippets for Creating React components with Typescript:

Default Exported React Component

Default Exported React Component - snippet

  "Typescript default React component": {
    "scope": "typescriptreact",
    "prefix": "rfcd",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
  }
Enter fullscreen mode Exit fullscreen mode

Exported React Component

Exported React Component - snippet

"Typescript React component": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
    ],
  }
Enter fullscreen mode Exit fullscreen mode

Flow breakdown

  • Type the prefix, in this case, rfc or rfcd. (You can call them whatever you like πŸ™‚).
  • Write the interface props.
  • Press the tab to jump to the function.
  • Add the props you wrote in the interface. (This feels like another step that can be optimized, take the props from the interface but I haven't yet found a solution for that)
  • Press tab.
  • Start writing the return of the component or just leave it as is with the Component's name.

Vs Code gives us variables we can use in the snippets, here I'm using the TM_FILENAME_BASE variable which gives me the name of the file (without its extension).

The common convention is to make the name of the file the same as the name of the component, but if that's not your case then it's possible to alter that variable, look here for more information.


To create your own snippets you'll need to go to Code > Preferences (User Snippets under File > Preferences on Windows), and then select the language for which the snippets should appear, or the New Global Snippets file option.

I've heard of an extension called Folder Template, which creates a folder structure that has a ready-made template inside, I haven't tried it yet but it seems like a good productivity hack, so stay tuned for another post about it in the near future πŸ™‚.

Top comments (0)