react.code-snippets.json

{
    "console.log": {
        "scope": "javascript,typescript",
        "prefix": "log",
        "body": [
            "console.log($1)",
        ],
        "description": "console.log"
    },

    "HOC": {
        "scope": "javascript,typescript",
        "prefix": "__HOC",
        "body": [
            "const with{1:HOC} = (Component) => (props) => {",
            "",
            "  return <Component {...props} />",
            "}",
            "$2"
        ],
        "description": "High Order Component Basic"
    },

    "Component": {
        "scope": "javascript,typescript",
        "prefix": "__COMP",
        "body": [
            "export const ${1:Component} = ({",
            "  ${2:prop1},",
            "}) => {",
            "",
            "  return (",
            "    <>",
            "      Hallo $1 !",
            "    </>",
            "  )",
            "}",
            "",
            "${1:Component}.propTypes = {",
            "  ${2:prop1}: PropTypes.string",
            "}",
        ],
        "description": "Component Basic"
    },

    "Styles": {
        "scope": "javascript,typescript",
        "prefix": "__STYLE_MODULE",
        "body": [
            "import styles from './${1:Component}.module.${2:css}'",
        ],
        "description": "styles component import"
    },

    "Component import React": {
        "scope": "javascript,typescript",
        "prefix": "__COMP_REACT_IMPORT",
        "body": [
            "import React from 'react'",
            "import PropTypes from 'prop-types'",
            "",
            "export const ${1:Component} = ({",
            "  ${2:prop1},",
            "}) => {",
            "",
            "  return (",
            "    <>",
            "      Hallo $1 !",
            "    </>",
            "  )",
            "}",
            "",
            "${1:Component}.propTypes = {",
            "  ${2:prop1}: PropTypes.string",
            "}",
        ],
        "description": "Component Basic"
    },

    "Nextjs Page": {
        "scope": "javascript,typescript",
        "prefix": "__NEXT_PAGE",
        "body": [
            "import React from 'react'",
            "import PropTypes from 'prop-types'",
            "import Head from 'next/head'",
            "import { compose } from 'ramda'",
            "",
            "export const ${1:Component} = ({",
            "  ${2:prop1},",
            "}) => {",
            "",
            "  return (",
            "    <>",
            "      Hallo $1 !",
            "    </>",
            "  )",
            "}",
            "",
            "${1:Component}.propTypes = {",
            " ${2:prop1}: PropTypes.any,",
            "}",
            "",
            "const ${1}Page = compose(x => x)(FollowUp)",

            "${1}Page.getInitialProps = async (context) => {",
            "  return { ${2:prop1}: context.query?.${2:prop1} }",
            "}",
            "",
            "export default ${1}Page"
        ],
        "description": "Next Page with query variable"
    },

    "Reducer Basic": {
        "scope": "javascript,typescript",
        "prefix": "__REDUCER_BASIC",
        "body": [
            "export const ACTIONS = {",
            "  ACTION_1: 'ACTION_1',",
            "}",
            "",
            "export const initialState = {}",
            "",
            "export const reducer = (state, action) => {",
            "  switch(action.type) {",
            "    case ACTIONS.ACTION_1:",
            "      return { ...state }",
            "",
            "    default: return state",
            "  }",
            "}",
            "",
        ],
        "description": "Reducer Basic"
    },

    "useEffect": {
        "scope": "javascript,typescript",
        "prefix": "__USE_EFFECT",
        "body": [
            "useEffect(() => {",
            "  $1",
            "}, [])"
        ],
        "description": "useEffect"
    },

    "useState": {
        "scope": "javascript,typescript",
        "prefix": "__USE_STATE",
        "body": [
            "const [${1:a}, set${1:A}] = useState($3)"
        ],
        "description": "useState"
    },

    "Test Basic": {
        "scope": "javascript,typescript",
        "prefix": "__TEST_DESCRIBE",
        "body": [
            "describe('$1', () => {",
            "  it('$2', () => {",
            "    const actual = 3",
            "    const expected = 5",
            "    expect(actual).toEqual(expected)",
            "  })",
            "})",
        ],
        "description": "describe('test', ...)"
    },

    "Test it": {
        "scope": "javascript,typescript",
        "prefix": "__TEST_IT",
        "body": [
            "it('$1', () => {",
            "  const actual = ${2:aaa}",
            "  const expected = ${3:bbb}",
            "  expect(actual).toEqual(expected)",
            "})",
        ],
        "description": "it('works', ...)"
    },

    "snapshot as JSON": {
        "scope": "javascript,typescript",
        "prefix": "__SNAP_JSON",
        "body": [
            "expect.addSnapshotSerializer({",
            "  test: (val) => val,",
            "  print: (val) => JSON.stringify(val, undefined, 4),",
            "})",
        ],
        "description": "use JSON in addSnapshotSerializer"
    },
}