vscode react snippets

javascriptreact.json

{
	// Place your snippets for JavaScript 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:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"Basic react hoc unittest": {
		"prefix": "react-unit-comp",
		"body": [
			"import { spy } from 'sinon';",
			"import React form 'react';",
			"import { shallow, mount } from 'enzyme';",
			"import { BrowserRouter as router } from 'react-router-dom';",
			"import ${1:name}, { ${1:name} as Component } from 'components/${1:name}';",
			"",
			"describe ('${1:name} component', () => {",
			"\tlet wrapper, props, instance, enhancedWrapper;",
			"",
			"\tbeforeEach(() => {",
			"\t\t$0",
			"\t\tenhancedWrapper = mount(<${1:name} />);",
			"\t\twrapper = shallow(<Component />);",
			"\t\tinstance = wrapper.instance();",
			"\t});",
			"",
			"\tit('', () => {",
			"\t\t",
			"\t});",
			"});"
		],
		"description": "Unittest setup for React component HOCs with jest, mocha, enzyme, and sinon"
	},
	"Basic react hoc component": {
		"prefix": "react-hoc-comp",
		"body": [
			"// @flow",
			"import React from 'react';",
			"import { compose, pure } from 'recompose';",
			"",
			"type WrappedProps = {",
			"",
			"};",
			"",
			"type Props = {",
			"",
			"} & WrappedProps;",
			"",
			"export const ${1:name} = (props: Props) =>",
			"\t<div>Hi there $0</div>;",
			"",
			"const enhance = compose(",
			"\tpure",
			");",
			"export default enhance(${1:name});"
		],
		"description": "Basic react HOC component with recompose and flow types"
	}
}