SHARE
TWEET

Untitled

a guest Oct 21st, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. {
  2.     "import react": {
  3.         "scope": "typescriptreact",
  4.         "prefix": "imr",
  5.         "body": [
  6.             "import React from 'react';",
  7.             "$1"
  8.         ],
  9.         "description": "Import React"
  10.     },
  11.     "import styled-components": {
  12.         "scope": "typescriptreact",
  13.         "prefix": "imsc",
  14.         "body": [
  15.             "import styled from 'styled-components';",
  16.             "$1"
  17.         ],
  18.         "description": "Import Styled Components"
  19.     },
  20.     "import react, styled-components": {
  21.         "scope": "typescriptreact",
  22.         "prefix": "imrsc",
  23.         "body": [
  24.             "import React from 'react';",
  25.             "import styled from 'styled-components';",
  26.             "$1"
  27.         ],
  28.         "description": "Import React and Styled Components"
  29.     },
  30.     "Create functional TSX component": {
  31.         "scope": "typescriptreact",
  32.         "prefix": "fc",
  33.         "body": [
  34.             "import React from \"react\";",
  35.             "",
  36.             "export type ${1:Name}Props = {};",
  37.             "",
  38.             "const ${1:}: React.FC<${1:}Props> = () => {",
  39.             "  return (",
  40.             "    ${2:<>",
  41.             "      <div>${1:} Placeholder</div>",
  42.             "    </>}",
  43.             "  );",
  44.             "};",
  45.             "",
  46.             "export default ${1:};",
  47.         ],
  48.         "description": "Create a React TSX functional component."
  49.     },
  50.     "React Class Component": {
  51.         "prefix": "cc",
  52.         "body": [
  53.             "import React from 'react';",
  54.             "",
  55.             "export interface ${1:App}Props {",
  56.             "}",
  57.             "",
  58.             "export interface ${1:App}State {",
  59.             "}",
  60.             "",
  61.             "class ${1:} extends React.Component<${1:}Props, ${1:}State> {",
  62.             "  constructor(props: ${1:}Props) {",
  63.             "    super(props);",
  64.             "",
  65.             "    this.state = {}",
  66.             "  }",
  67.             "",
  68.             "  public render() {",
  69.             "    return (",
  70.             "    ${2:<>",
  71.             "      <div>${1:} Placeholder</div>",
  72.             "    </>}",
  73.             "    );",
  74.             "  }",
  75.             "}",
  76.             "",
  77.             "export default ${1:}"
  78.         ],
  79.         "description": "Create a React TSX Class Component."
  80.     },
  81.     "Create Styled Component": {
  82.         "scope": "typescriptreact",
  83.         "prefix": "sc",
  84.         "body": [
  85.             "import styled from \"styled-components\";",
  86.             "",
  87.             "export type ${1:Name}Props = {};",
  88.             "",
  89.             "const ${1:} = styled.${2:div}<${1:Name}Props>`",
  90.             "  color: #333;",
  91.             "`;",
  92.             "",
  93.             "export default ${1:};",
  94.         ],
  95.         "description": "Create a TSX Styled Component"
  96.     },
  97.     "Create snapshot": {
  98.         "scope": "typescriptreact",
  99.         "prefix": "snap",
  100.         "body": [
  101.             "import React from \"react\";",
  102.             "import ${1:Name} from \"$2\";",
  103.             "import { render, cleanup } from \"@testing-library/react\";",
  104.             "",
  105.             "afterEach(cleanup);",
  106.             "",
  107.             "it(\"matches snapshot\", () => {",
  108.             "  const { asFragment } = render(<${1:} />);",
  109.             "  expect(asFragment()).toMatchSnapshot();",
  110.             "});"
  111.  
  112.         ],
  113.         "description": "Create snapshot with Jest and React Testing Library."
  114.     }
  115. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top