typescriptreact.json

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "Typescript React PureComponent": {
    "prefix": "rpc",
    "body": [
      "import * as React from 'react'",
      "",
      "export class $1 extends React.PureComponent {",
      "\trender() {",
      "\t\treturn ($2);",
      "}}"
    ],
    "description": "Typescript React PureComponent"
  },
  "Typescript React Function Component": {
    "prefix": "rh",
    "body": [
      "import * as React from 'react'",
      "",
      "export const $1 = () => {",
      "\t\treturn ($2);",
      "}"
    ],
    "description": "Typescript React Function Component"
  },
  "React Native StyleSheet": {
    "prefix": "rnss",
    "body": ["const styles = StyleSheet.create({", "", "});"],
    "description": "React Native StyleSheet"
  },
  "Toggle State": {
    "prefix": "tog",
    "body": ["this.setState(state => ({", "\topen: !state.open", "}));"],
    "description": "toggle state"
  },
  "Apollo Query Component": {
    "prefix": "apq",
    "body": [
      "interface Props {",
      "  children: (data: QueryResult<$1, OperationVariables>) => JSX.Element;",
      "}",
      "",
      "export class $2 extends React.PureComponent<Props> {",
      "  render() {",
      "    return (",
      "     <Query<$1> query={$3}>{x => this.props.children(x)}</Query>",
      "    );",
      "  }",
      "}"
    ],
    "description": "Apollo Query Component"
  }
}