typescript react vscode snippets

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 React from 'react'",
		"",
		"interface ${TM_FILENAME_BASE}Props {",
		"$1",
		"}",
		"",
		"export const $TM_FILENAME_BASE: React.FC<${TM_FILENAME_BASE}Props> = ({$2}) => {",
		"\treturn ($3);",
		"}"
	  ],
	  "description": "Typescript React Function Component"
	},
	"React Native StyleSheet": {
	  "prefix": "rnss",
	  "body": [
		"import {StyleSheet} from 'react-native'",
		"const styles = StyleSheet.create({",
		"",
		"});"
	  ],
	  "description": "React Native StyleSheet"
	},
	"Toggle State": {
	  "prefix": "tog",
	  "body": ["this.setState(state => ({", "\topen: !state.open", "}));"],
	  "description": "toggle state"
	},
	"console.log": {
	  "prefix": "cl",
	  "body": ["console.log($1)"],
	  "description": "console.log"
	},
	"className={classnames()}": {
	  "prefix": "cc",
	  "body": ["className={classnames('$1')}"],
	  "description": "tailwind react stuff"
	},
	"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"
	}
  }