Typescript + react snippets

typescriptreact.json

{
  "React Component": {
    "prefix": "rcc",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:IApp}Props {",
      "  ${2:}",
      "}",
      "",
      "export default class ${1:} extends React.Component<${1:}Props, any> {",
      "  public render() {",
      "    return (",
      "      <div>",
      "        ${3:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "Create a React Component with typescript."
  },
  "React Component - Full": {
    "prefix": "rcfull",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:IApp}Props {",
      "  ${2:}",
      "}",
      "",
      "export interface ${1:IApp}State {",
      "  ${3:}",
      "}",
      "",
      "export default class ${1:} extends React.Component<${1:}Props, ${1:}State> {",
      "  public state = {",
      "    ${4:}",
      "  }",
      "",
      "  public render() {",
      "    return (",
      "      <div>",
      "        ${5:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "Create a stateful React Component with typescript with Props, State, and a constructor."
  },
  "React PureComponent": {
    "prefix": "rpcc",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:IApp}Props {",
      "  ${2:}",
      "}",
      "",
      "export default class ${1:} extends React.PureComponent<${1:}Props, any> {",
      "  public render() {",
      "    return (",
      "      <div>",
      "        ${3:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "Create a React PureComponent."
  },
  "React Pure Function Component": {
    "prefix": "rpfc",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:IApp}Props {",
      "}",
      "",
      "export function ${1:} (props: ${1:}Props) {",
      "  return (",
      "    <div>",
      "      ${0}",
      "    </div>",
      "  )",
      "}",
      ""
    ],
    "description": "Create a React Pure Function Component."
  },
  "React Stateless Functional Component": {
    "prefix": "rsfc",
    "body": [
      "import * as React from 'react'",
      "",
      "interface ${1:IApp}Props {$2",
      "}",
      "",
      "const $1: React.FunctionComponent<$1Props> = (props) => {",
      "  return $0",
      "}",
      "",
      "export default $1"
    ],
    "description": "Create a React Stateless Functional Component."
  },
  "constructor": {
    "prefix": "conc",
    "body": [
      "public constructor(props: ${1:IApp}Props) {",
      "  super(props)",
      "",
      "  $0",
      "}"
    ],
    "description": "Add a constructor in class."
  },
  "componentWillMount": {
    "prefix": "cwm",
    "body": ["public componentWillMount() {", "  ${1:}", "}"],
    "description": "Invoked immediately before mounting occurs. It is called before render()."
  },
  "render": {
    "prefix": "ren",
    "body": ["public render() {", "  return (", "    ${1:}", "  )", "}"],
    "description": "When called, it should examine this.props and this.state and return a single React element."
  },
  "componentDidMount": {
    "prefix": "cdm",
    "body": ["componentDidMount() {", "  ${1:}", "}"],
    "description": "Invoked immediately after a component is mounted."
  },
  "componentWillReceiveProps": {
    "prefix": "cwrp",
    "body": ["componentWillReceiveProps(nextProps: ${1:}) {", "  ${2:}", "}"],
    "description": "Invoked before a mounted component receives new props."
  },
  "shouldComponentUpdate": {
    "prefix": "scu",
    "body": [
      "shouldComponentUpdate(nextProps: ${1:}, nextState) {",
      "  ${2:}",
      "}"
    ],
    "description": "Invoked before rendering when new props or state are being received."
  },
  "componentWillUpdate": {
    "prefix": "cwu",
    "body": [
      "componentWillUpdate(nextProps: ${1:}, nextState) {",
      "  ${2:}",
      "}"
    ],
    "description": "Invoked immediately before rendering when new props or state are being received."
  },
  "componentDidUpdate": {
    "prefix": "cdu",
    "body": [
      "componentDidUpdate(prevProps: ${1:}, prevState) {",
      "  ${2:}",
      "}"
    ],
    "description": "Invoked immediately after updating occurs. This method is not called for the initial render"
  },
  "componentWillUnmount": {
    "prefix": "cwum",
    "body": ["componentWillUnmount() {", "  ${1:}", "}"],
    "description": "Invoked immediately before a component is unmounted and destroyed"
  },
  "componentSetState": {
    "prefix": "sst",
    "body": ["this.setState(${1:})"],
    "description": "Performs a shallow merge of nextState into current state"
  },
  "bind method": {
    "prefix": "bnd",
    "body": ["this.${1:} = this.${1:}.bind(this)"],
    "description": "bind this in method"
  },
  "method": {
    "prefix": "met",
    "body": ["${1:methodName} = (${2:e}) => {", "  ${3:}", "}"],
    "description": "Create a method"
  },
  "React redux container": {
    "prefix": "tscntr",
    "body": [
      "import * as React from 'react'",
      "import { connect } from 'react-redux'",
      "",
      "export interface ${1:IApp}Props {",
      "}",
      "",
      "class ${1:} extends React.Component<${1:}Props, any> {",
      "  public render() {",
      "    return (",
      "      <div>",
      "        ${2:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      "",
      "const mapState2Props = state => {",
      "  return {",
      "  }",
      "}",
      "",
      "export default connect(mapState2Props)(${1:})",
      ""
    ],
    "description": "React Redux container"
  },
  "import": {
    "prefix": "imp",
    "body": ["import { $2 } from '$1'"],
    "description": "Create a import"
  },
  "getDerivedStateFromProps": {
    "prefix": "gdsfp",
    "body": [
      "static getDerivedStateFromProps(nextProps: ${1:any}, prevState: ${2:any}) {",
      "  ${0}",
      "}"
    ],
    "description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates"
  },
  "getSnapshotBeforeUpdate": {
    "prefix": "gsbu",
    "body": [
      "getSnapshotBeforeUpdate(prevProps: ${1:any}, prevState: ${2:any}) {",
      "  ${0}",
      "}"
    ],
    "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM"
  },
  "consoleLog": {
    "prefix": "co",
    "body": ["console.log($1)"],
    "description": "Console.log(var)"
  },
  "consoleLogExt": {
    "prefix": "con",
    "body": ["console.log('$1', $1)"],
    "description": "Console.log('var', var)"
  }
}