Visual Code Snippets

rf.code-snippets.js

{
    "Simple react component": {
        "prefix": "rc",
        "body": [
          "import React from 'react';",
          "",
          "interface $1Props {",
          "}",
          "",
          "const $1 = (props: $1Props) => {",
          "  return (",
          "    <React.Fragment>",
          "",
          "    </React.Fragment>",
          "  );",
          "};",
          "",
          "export default $1;"
        ],
        "description": "Simple react component"
      },
      "React Connected Component": {
        "prefix": "rcc",
        "body": [
          "import React from 'react';",
          "import styled from 'styled-components'",
          "import { createStructuredSelector } from 'reselect';",
          "",
          "",
          "const connect = require('react-redux').connect",
          "",
          "interface $1Props {",
          "",
          "}",
          "",
          "const $1 = (props: $1Props) => {",
          "    return (",
          "        <React.Fragment>",
          "",
          "        </React.Fragment>",
          "    )",
          "};",
          "",
          "function mapStateToProps() {",
          "    return createStructuredSelector({",
          "",
          "    })",
          "};",
          "",
          "function mapDispatchToProps(dispatch: any) {",
          "    return {",
          "",
          "    }",
          "};",
          "",
          "export default connect(mapStateToProps, mapDispatchToProps)($1);"
        ],
        "description": "React Connected Component"
      },
      "Storybook": {
        "prefix": "rstory",
        "body": [
          "import React from 'react';",
          "import { Story, Meta } from '@storybook/react/types-6-0';",
          "import { Provider } from 'react-redux';",
          "import store from '../../../../store/store';",
          "",
          "export default {",
          "    title: '$1'",
          "} as Meta;",
          "",
          "const $1Story: Story = () => {",
          "    return (",
          "        <Provider store={store}>",
          "            <MyComponent />",
          "        </Provider>",
          "    )",
          "}",
          "",
          "$1Story.storyName = \"My Story\";",
          "",
          "export const $1 = $1Story.bind({});"
        ],
        "description": "Storybook"
      },
      "React test": {
        "prefix": "rtest",
        "body": [
          "import * as React from 'react';",
          "import { createStore } from 'redux';",
          "import { render, screen } from '@testing-library/react';",
          "import '@testing-library/jest-dom/extend-expect';",
          "",
          "import { Provider } from 'react-redux';",
          "import { state } from '../../../../store/root-reducer';",
          "",
          "import $1 from './${TM_FILENAME/\\.test\\.tsx$|/${1}${2}/g}';",
          "",
          "//",
          "// yarn test ${TM_DIRECTORY/.*(?=src)/$1/}/${TM_FILENAME} --coverage --collectCoverageOnlyFrom=${TM_DIRECTORY/.*(?=src)/$1/}/${TM_FILENAME/\\.test\\.tsx$|/${1}${2}/g}.tsx",
          "//",
          "describe('$1 Component', () => {",
          "",
          "    it('Mounts the component', () => {",
          "        const store = createStore(state);",
          "        render(",
          "            <Provider store={store}>",
          "                <$1 />",
          "            </Provider>",
          "        );",
          "",
          "        console.log(screen.logTestingPlaygroundURL());",
          "        //expect(screen.queryByRole('heading', { name: /my title/i })).toBeInTheDocument();",
          "    });",
          "});"
        ],
        "description": "React test"
      },
      "Use State": {
        "prefix": "us",
        "body": [
            "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState($2);",
        ],
        "description": "Use State hook"
      },
      "Use Effect Hook": {
        "prefix": "ue",
        "body": [
          "useEffect(() => {",
          "",
          "}, [$1]);"
        ],
        "description": "Use Effect Hook"
      },
}