swyx-react-typescript-snippets/snippets/snippets.json at master · swyxio/swyx-react-typescript-snippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
{
  "import react and styled components": {
    "prefix": "imrsc",
    "body": [
      "import React from 'react'",
      "import styled from 'styled-components'"
    ],
    "description": "import react and styled components"
  },
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "export type $1Props = { $2: $3 }",
      "export const $1: React.FC<$1Props> = ({ $2 }) => {",
      "    console.log({ $2 })",
      "    return (",
      "        $0",
      "    )",
      "};",
      "",
      "export default $1;"
    ],
    "description": "Create a React Function Component"
  },
  "React Hooks Component": {
    "prefix": "rhc",
    "body": [
      "export type $1Props = { $2: $3 }",
      "export const $1: React.FC<$1Props> = ({ $2 }) => {",
      "    console.log({ $2 })",
      "    const [${4}, set${4/(.*)/${4:/capitalize}/}] = React.useState($5);",
      "    React.useEffect(() => {}, [])",
      "    return (",
      "        ${0}",
      "    )",
      "};",
      "",
      "export default $1;"
    ],
    "description": "Create a React Hooks Component."
  },
  "React Styled Component": {
    "prefix": "rsc",
    "body": [
      "const StyledDiv = styled('div')`",
      "  border: 3px solid red;",
      "`",
      "export type $1Props = { $2: $3 }",
      "export const $1: React.FC<$1Props> = ({ $2 }) => {",
      "    console.log({ $2 })",
      "    const [${4}, set${4/(.*)/${4:/capitalize}/}] = React.useState($5);",
      "    React.useEffect(() => {}, [])",
      "    return (",
      "        <StyledDiv>",
      "            ${0}",
      "        </StyledDiv>",
      "    )",
      "};",
      "",
      "export default $1;"
    ],
    "description": "Create a Styled React Component."
  }
}