@shahruz shared nextjs & react vscode snippets

nextjs-snippets.code-snippets

{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react'",
      "",
      "const ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = () => {",
      "\treturn (",
      "\t\t<div className=\"${classname:${TM_FILENAME_BASE/(.*)/${1:/downcase}/}}\">",
      "\t\t\t$0",
      "\t\t\t<style jsx>{`",
      "\t\t\t\t.${classname:${TM_FILENAME_BASE/(.*)/${1:/downcase}/}} {",
      "\t\t\t\t\t",
      "\t\t\t\t}",
      "\t\t\t`}</style>",
      "\t\t</div>",
      "\t)",
      "}",
      "",
      "export default ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}};"
    ]
  },
  "React Native Function Component": {
    "prefix": "rnfc",
    "body": [
      "import React from 'react'",
      "import { View, Text, StyleSheet } from 'react-native'",
      "",
      "const ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = () => {",
      "\treturn (",
      "\t\t<View>",
      "\t\t\t$0",
      "\t\t</View>",
      "\t)",
      "}",
      "",
      "const styles = StyleSheet.create({",
      "\t",
      "});",
      "",
      "export default ${name:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}};"
    ]
  },
  "Generic Function": {
    "prefix": "gfunc",
    "body": [
      "const ${name:${TM_FILENAME_BASE/(.*)/${1:/pascalCase}/}} = () => {",
      "\t$0",
      "}",
      "",
      "export default ${name:${TM_FILENAME_BASE/(.*)/${1:/pascalCase}/}};"
    ]
  },
  "Next Scripts": {
    "prefix": "next-scripts",
    "body": [
      "\"scripts\": {",
      "\t\"dev\" : \"next\",",
      "\t\"build\" : \"next build\",",
      "\t\"start\" : \"next start\"",
      "},"
    ]
  },
  "Styled JSX": {
    "prefix": "style-jsx",
    "body": ["<style jsx>{`", "\t$0", "`}</style>"]
  },
  "Styled Global JSX": {
    "prefix": "style-jsx-global",
    "body": ["<style jsx global>{`", "\t$0", "`}</style>"]
  },
  "React div": {
    "prefix": "div-react",
    "body": ["<div className=\"$0\"></div>"]
  },
  "React span": {
    "prefix": "span-react",
    "body": ["<span className=\"$0\"></span>"]
  },
  "React img": {
    "prefix": "img-react",
    "body": ["<img className=\"$0\" src={``}/>"]
  },
  "System Font Stack": {
    "prefix": "sfs",
    "body": [
      "font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";"
    ]
  },
  "Mono Font Stack": {
    "prefix": "sfsmono",
    "body": [
      "font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;"
    ]
  },
  "Media Query": {
    "prefix": "mq",
    "body": ["@media (max-width: 768px) {", "\t$0", "}"]
  },
  "Next API Function": {
    "prefix": "next-api",
    "body": [
      "import { NextApiHandler } from 'next';",
      "",
      "const api: NextApiHandler = async (req, res) => {",
      "\t$0",
      "\treturn res.json({});",
      "};",
      "",
      "export default api;"
    ]
  },
  "CSS Top Left Bottom Right": {
    "prefix": "tlbr",
    "body": ["top: 0; left: 0; right: 0; bottom: 0;"]
  },
  "JSON Preview Component": {
    "prefix": "json-preview",
    "body": ["<pre>{JSON.stringify($0, null, 2)}</pre>"]
  },
  "console.log()": {
    "prefix": "clog",
    "body": ["console.log($0);"]
  }
}