VSCode Snippets for Next.js + ChakraUI components

typescriptreact.json

{
  "Create functional component": {
    "prefix": "fct",
    "body": [
      "export interface ${1:Component}Props {",
      "",
      "}",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = ({ ...props }) => {",
      "  return (",
      "    <>",
      "    </>",
      "  )",
      "}",
      ""
    ],
    "description": "Boilerplate for typed functional component"
  },
  "Create Box component": {
    "prefix": "fcb",
    "body": [
      "import React from 'react'",
      "import PseudoBox, { PseudoBoxProps } from '@chakra-ui/core/dist/PseudoBox'",
      "",
      "export interface ${1:Component}Props extends PseudoBoxProps {",
      "",
      "}",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = ({ ...props }) => {",
      "  return (",
      "    <PseudoBox {...props}>",
      "      $2",
      "    </PseudoBox>",
      "  )",
      "}",
      ""
    ],
    "description": "ChakraUI Box component"
  },
  "Create Stack component": {
    "prefix": "fcs",
    "body": [
      "import React from 'react'",
      "import Stack, { StackProps } from '@chakra-ui/core/dist/Stack'",
      "",
      "export interface ${1:Component}Props extends StackProps {",
      "",
      "}",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = ({ ...props }) => {",
      "  return (",
      "    <Stack {...props}>",
      "      $2",
      "    </Stack>",
      "  )",
      "}",
      ""
    ],
    "description": "ChakraUI Stack component"
  },
  "Create Flex component": {
    "prefix": "fcf",
    "body": [
      "import React from 'react'",
      "import Flex, { FlexProps } from '@chakra-ui/core/dist/Flex'",
      "",
      "export interface ${1:Component}Props extends FlexProps {",
      "",
      "}",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = ({ ...props }) => {",
      "  return (",
      "    <Flex {...props}>",
      "      $2",
      "    </Flex>",
      "  )",
      "}",
      ""
    ],
    "description": "ChakraUI Flex component"
  },
  "Create Next.js page": {
    "prefix": "fcn",
    "body": [
      "import React from 'react'",
      "import { NextPage } from 'next'",
      "",
      "export interface ${1:Page}Props {",
      "",
      "}",
      "",
      "const ${1:Page}: NextPage<${1:Page}Props> = ({}) => {",
      "  return (",
      "    <>",
      "      $2",
      "    </>",
      "  )",
      "}",
      "",
      "export default ${1:Page}",
      ""
    ],
    "description": "Next.js page component"
  },
  "Import styled-components": {
    "prefix": "ims",
    "body": "import styled from 'styled-components'",
    "description": "Import styled-components (ES6 import)"
  },
  "console.dir": {
    "prefix": "cdi",
    "body": "console.dir(${1})"
  },
  "console.log": {
    "prefix": "clg",
    "body": "console.log(${1})"
  },
  "console.info": {
    "prefix": "cin",
    "body": "console.info(${1})"
  },
  "console.debug": {
    "prefix": "cdb",
    "body": "console.debug(${1})"
  }
}