React VSCode Snippets

my_react_vscode_snippets.md

New Component

  "New Component": {
    "prefix": "rfc",
    "body": [
      "interface ${name:${TM_FILENAME_BASE}}Props {}",
      "",
      "export const ${name:${TM_FILENAME_BASE}} = (props: ${name:${TM_FILENAME_BASE}}Props) => { return <div></div> }"
    ]
  }

  "New Component": {
    "prefix": "rfc",
    "body": [
      "interface ${name:${TM_FILENAME_BASE}}Props {}",
      "",
      "export function ${name:${TM_FILENAME_BASE}}(props: ${name:${TM_FILENAME_BASE}}Props) {",
      "\tconst {} = props;",
      "\treturn <div></div>",
      "}"
    ]
  },
  "New Styled Component": {
    "prefix": "rfcs",
    "body": [
      "import styles from './${TM_FILENAME_BASE}.module.css'",
      "interface ${name:${TM_FILENAME_BASE}}Props {}",
      "",
      "export function ${name:${TM_FILENAME_BASE}}(props: ${name:${TM_FILENAME_BASE}}Props) {",
      "\tconst {} = props;",
      "\treturn <div></div>",
      "}"
    ]
  }

Ex:

interface NameProps {}

export const NameColumn = (props: NameProps) => {
  return <div></div>
}