typescriptreact.code-snippets

{
  //#region  //*=========== React ===========
  "import React": {
    "prefix": "ir",
    "body": ["import * as React from 'react';"]
  },
  "React.useState": {
    "prefix": "us",
    "body": [
      "const [${1}, set${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}] = React.useState(${2:initial${1/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}})$0"
    ]
  },
  "React.useEffect": {
    "prefix": "uf",
    "body": ["React.useEffect(() => {", "  $0", "}, []);"]
  },
  "React.useReducer": {
    "prefix": "ur",
    "body": [
      "const [state, dispatch] = React.useReducer(${0:someReducer}, {",
      "  ",
      "})"
    ]
  },
  "React.useRef": {
    "prefix": "urf",
    "body": ["const ${1:someRef} = React.useRef($0)"]
  },
  "React Functional Component": {
    "prefix": "rc",
    "body": [
      "import * as React from 'react';\n",
      "export default function ${1:${TM_FILENAME_BASE}}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}"
    ]
  },
  //#endregion  //*======== React ===========

  //#region  //*=========== Commons ===========
  "Region": {
    "prefix": "reg",
    "body": [
      "//#region  //*=========== ${1} ===========",
      "$0",
      "//#endregion  //*======== ${1} ==========="
    ]
  },
  //#endregion  //*======== Commons ===========

  //#region  //*=========== Nextjs ===========
  "Next Pages": {
    "prefix": "np",
    "body": [
      "import * as React from 'react';\n",
      "import Layout from '@/components/layout/Layout';",
      "import Seo from '@/components/Seo';\n",
      "export default function ${1:${TM_FILENAME_BASE/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}}Page() {",
      "  return (",
      "    <Layout>",
      "      <Seo templateTitle='${1:${TM_FILENAME_BASE/(^[a-zA-Z])(.*)/${1:/upcase}${2}/}}' />\n",
      "      <main>\n",
      "        <section className=''>",
      "          <div className='layout py-20 min-h-screen'>",
      "            $0",
      "          </div>",
      "        </section>",
      "      </main>",
      "    </Layout>",
      "  )",
      "}"
    ]
  },
  "Next API": {
    "prefix": "napi",
    "body": [
      "import { NextApiRequest, NextApiResponse } from 'next';\n",
      "export default function ${1:${TM_FILENAME_BASE}}(req: NextApiRequest, res: NextApiResponse) {",
      "  if (req.method === 'GET') {",
      "    res.status(200).json({ name: 'Bambang' });",
      "  } else {",
      "    res.status(405).json({ message: 'Method Not Allowed' });",
      "  }",
      "}"
    ]
  },
  "Get Static Props": {
    "prefix": "gsp",
    "body": [
      "export const getStaticProps: GetStaticProps = async (context) => {",
      "  return {",
      "    props: {}",
      "  };",
      "}"
    ]
  },
  "Get Static Paths": {
    "prefix": "gspa",
    "body": [
      "export const getStaticPaths: GetStaticPaths = async () => {",
      "  return {",
      "    paths: [",
      "      { params: { $1 }}",
      "    ],",
      "    fallback: ",
      "  };",
      "}"
    ]
  },
  "Get Server Side Props": {
    "prefix": "gssp",
    "body": [
      "export const getServerSideProps: GetServerSideProps = async (context) => {",
      "  return {",
      "    props: {}",
      "  };",
      "}"
    ]
  },
  "Import useRouter": {
    "prefix": "imust",
    "body": ["import { useRouter } from 'next/router';"]
  },
  "Import Next Image": {
    "prefix": "imimg",
    "body": ["import Image from 'next/image';"]
  }
  //#endregion  //*======== Nextjs ===========
}