React Component Rich Snippet

keybindings.json

// Place your key bindings in this file to override the defaults
[
    {
        "key": "cmd+alt+s",
        "command": "editor.action.insertSnippet",
        "args": {
            "name": "Styled Component"
        }
    }
]

ReachComponent.code-snippets

{
    "Styled Component": {
        "scope": "javascript",
        "prefix": [
            "styled",
            "styled-component"
        ],
        "body": [
            "import React from \"react\"",
            "import PropTypes from \"prop-types\"",
            "import styled, { css } from \"styled-components\"",
            "",
            "${1:name}.propTypes = {",
            "\tclassName: PropTypes.string.isRequired,",
            "}",
            "",
            "function ${1:name}({ className }) {",
            "\treturn <div className={className} />",
            "}",
            "",
            "export default styled(${1:name})`",
            "\t${props => css``}",
            "`"
        ],
        "description": "Creates a quick styled component"
    },
    "Export Default": {
        "scope": "javascript",
        "prefix": [
            "export"
        ],
        "body": [
            "export { default } from \"./${1:name}\""
        ],
        "description": "Create a simple default export"
    },
    "xlog": {
        "scope": "javascript",
        "prefix": "xlog",
        "body": [
            "console.log(\"${1:var}\", JSON.parse(JSON.stringify(${1:var})))"
        ],
        "description": "logs json stuff through proxy"
    }
}

Thanks @medatech. Here's my one I adapted from this to Typescript and emotion:

{
  "component": {
    "scope": "typescriptreact",
    "prefix": ["component", "styled-component"],
    "body": [
      "/** @jsx jsx */",
      "import { css, jsx } from \"@emotion/core\"",
      "import React from \"react\"",
      "",
      "/**",
      "  Interface for ${1:Component} props",
      "*/",
      "interface ${1:Component}Props {",
      "  children: any",
      "};",
      "",
      "/**",
      "  A ${1:Component} component.",
      "*/",
      "const ${1:Component}: React.FC<${1:Component}Props> = (props) => {",
      "  return <div css={css``}>${1:Component} component</div>",
      "}",
      "",
      "export default ${1:Component};"
    ],
    "description": "Creates a quick styled component"
  }
}