TypeScript React Code snippet

Codesnippet.json

{
  "Object Destructure from this.props": {
    "prefix": "odprops",
    "body": ["const { ${1:value} } = this.props;"],
    "description": ""
  },
  "Re-export": {
    "prefix": "rexp",
    "body": [
      "export { default as ${1:MyComponent} } from './${1:MyComponent}';"
    ],
    "description": ""
  },
  "Re-export as default": {
    "prefix": "rexpd",
    "body": ["export { default } from './${1:MyComponent}';"],
    "description": ""
  },
  "Create Typed Functional Component": {
    "prefix": "rsc",
    "body": [
      "import * as React from 'react';",
      "import './${1:${TM_FILENAME_BASE}}.scss';",
      "",
      "interface ${1:${TM_FILENAME_BASE}}Props {}",
      "",
      "const ${1:${TM_FILENAME_BASE}}: React.SFC<${1:${TM_FILENAME_BASE}}Props> = props => {",
      "  return <div className=\"${1:${TM_FILENAME_BASE}}\">${1:${TM_FILENAME_BASE}}</div>;",
      "};",
      "",
      "export default ${1:${TM_FILENAME_BASE}};",
      ""
    ],
    "description": ""
  },
  "Get injected props": {
    "prefix": "gip",
    "body": [
      "get injected() {",
      "    return this.props as InjectedProps;",
      "  }"
    ]
  },
  "Create Class Component": {
    "prefix": "rcc",
    "body": [
      "import * as React from 'react';",
      "${2:import './${TM_FILENAME_BASE}.scss';}",
      "",
      "interface ${1:${TM_FILENAME_BASE}}Props {}",
      "",
      "class ${1:${TM_FILENAME_BASE}} extends React.Component<${1:${TM_FILENAME_BASE}}Props> {",
      "  public render() {",
      "    return <div>${1:${TM_FILENAME_BASE}}</div>;",
      "  }",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}};",
      ""
    ],
    "description": ""
  },
  "inject from root store": {
    "prefix": "ijr",
    "body": ["@inject(({ }: RootStore) => ({}))"],
    "description": ""
  },
  "Created styled stateless component": {
    "prefix": "scrsc",
    "body": [
      "import * as React from 'react';",
      "import styled from 'styled-components';",
      "",
      "const ${TM_FILENAME_BASE}Wrapper = styled.div``;",
      "",
      "interface ${TM_FILENAME_BASE}Props {}",
      "const ${TM_FILENAME_BASE}: React.SFC<${TM_FILENAME_BASE}Props> = props => {",
      "  return <AppTemplateWrapper />;",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ],
    "description": ""
  },
  "tsrsc": {
    "prefix": "tsrsc",
    "body": [
      "import * as React from 'react';",
      "import styled from 'styled-components';",
      "",
      "const ${1:${TM_FILENAME_BASE}}Block = styled.div``;",
      "",
      "interface ${1:${TM_FILENAME_BASE}}Props {}",
      "",
      "const ${1:${TM_FILENAME_BASE}}: React.SFC<${1:${TM_FILENAME_BASE}}Props> = props => {",
      "  return <${1:${TM_FILENAME_BASE}}Block></${1:${TM_FILENAME_BASE}}Block>;",
      "};",
      "",
      "export default ${1:${TM_FILENAME_BASE}};",
      ""
    ],
    "description": ""
  },
  "Test React Code": {
    "prefix": "tstreact",
    "body": [
      "import React from 'react';",
      "import { shallow, ShallowWrapper } from 'enzyme';",
      "import ${1:ComponentName} from './${1:ComponentName}';",
      "",
      "describe('${1:ComponentName}', () => {",
      "  let component: ShallowWrapper | null = null;",
      "  it('renders correctly', () => {",
      "    component = shallow(<${1:ComponentName} />);",
      "  });",
      "  it('matches snapshot', () => {",
      "    expect(component).toMatchSnapshot();",
      "  });",
      "});",
      ""
    ],
    "description": ""
  },
  "Create TypeScript React Class Component": {
    "prefix": "tsrcc",
    "body": [
      "import * as React from 'react';",
      "",
      "interface ${1:ComponentName}Props {}",
      "interface ${1:ComponentName}State {}",
      "",
      "class ${1:ComponentName} extends React.Component<${1:ComponentName}Props, ${1:ComponentName}State> {",
      "  render() {",
      "    return null;",
      "  }",
      "}",
      "",
      "export default ${1:ComponentName};",
      ""
    ],
    "description": ""
  },
  "Create TypeScript React Redux Container Class Component": {
    "prefix": "tsreduxcc",
    "body": [
      "import * as React from 'react';",
      "import { connect } from 'react-redux';",
      "import { RootState } from '../../store';",
      "",
      "interface OwnProps {}",
      "interface StateProps {}",
      "interface DispatchProps {}",
      "interface ${1:${TM_FILENAME_BASE}}Props extends OwnProps, StateProps, DispatchProps {}",
      "interface ${1:${TM_FILENAME_BASE}}State {}",
      "",
      "class ${1:${TM_FILENAME_BASE}} extends React.Component<${1:${TM_FILENAME_BASE}}Props, ${1:${TM_FILENAME_BASE}}State> {",
      "  render() {",
      "    return null;",
      "  }",
      "}",
      "",
      "export default connect<StateProps, DispatchProps, OwnProps, RootState>(",
      "  state => ({}),",
      "  {},",
      ")(${1:${TM_FILENAME_BASE}});",
      ""
    ],
    "description": ""
  }
}