vs code: react functional component code snippet

I found myself making a lot of new React components recently and decided to finally create a code snippet to help me move more quickly.

To be clear, there are multiple VS Code extensions that would do this for me, but:

1. There are a lot of types that I don’t need
2. I wanted to have the capacity to customize them to how I write components (which largely assumes Typescript)

So, this is where I’m starting:

{
  "reactStatelessFunctionProps": {
    "prefix": "rsfp",
    "body": "import * as React from 'react';\n\nexport type ${2:${Props}} = {\n\t$0\n};\n\nexport function ${1:${TM_FILENAME_BASE}}(props: ${2:${Props}}) {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t);\n}",
    "description": "Creates a stateless React component as a named function - Assumes Typescript"
  }
}

Rules that work well with this snippet:

1. One component per file
2. Typescript is used

This does default the name of the component to the file name, though that’s the first option that can be overridden. It also defaults to a standard Props as the name of the type, which is exported by default.

There’s also no default export for the component, instead it’s exported as a named function.

Finally, if you tab all the way through, you’re landed in the props section to start building out the component Type before writing the component itself.