React snippets for Atom

snippets.cson

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it here:
# https://github.com/bevry/cson#what-is-cson
'.source.js':
	reactClassCompoment:
		prefix: "rcc"
		body: '''
			import React, { Component } from 'react';

			class ${1:componentName} extends Component {
				render() {
					return (
						<div>
							$0
						</div>
					);
				}
			}

			export default ${1:componentName};
		'''
		description: "Creates a React component class with ES6 module system"
	reactJustClassCompoment:
		prefix: "rcjc"
		body: '''
			class ${1:componentName} extends Component {
				render() {
					return (
						<div>
							$0
						</div>
					);
				}
			}

		'''
		description: "Creates a React component class with ES6 module system"
	reactClassCompomentPropTypes:
		prefix: "rccp"
		body: '''
			import React, { Component, PropTypes } from 'react';

			class ${1:componentName} extends Component {
				render() {
					return (
						<div>
							$0
						</div>
					);
				}
			}

			${1:componentName}.propTypes = {

			};

			export default ${1:componentName};
		'''
		description: "Creates a React component class with PropTypes and ES6 module system"
	reactClassCompomentWithMethods:
		prefix: "rcfc"
		body: '''
			import React, { Component, PropTypes } from 'react';

			class ${1:componentName} extends Component {
				constructor(props) {
					super(props);

				}

				componentWillMount() {

				}

				componentDidMount() {

				}

				componentWillReceiveProps(nextProps) {

				}

				shouldComponentUpdate(nextProps, nextState) {

				}

				componentWillUpdate(nextProps, nextState) {

				}

				componentDidUpdate(prevProps, prevState) {

				}

				componentWillUnmount() {

				}

				render() {
					return (
						<div>

						</div>
					);
				}
			}

			${1:componentName}.propTypes = {

			};

			export default ${1:componentName};
		'''
		description: "Creates a React component class with PropTypes and all lifecycle methods and ES6 module system"
	reactStateless:
		prefix: "rsc"
		body: '''
			import React from 'react';

			const ${1:componentName} = () => {
				return (
					<div>
						$0
					</div>
				);
			};

			export default ${1:componentName};
		'''
		description: "Creates a stateless React component without PropTypes and ES6 module system"
	reactStatelessProps:
		prefix: "rscp"
		body: '''
			import React, { PropTypes } from 'react';

			const ${1:componentName} = props => {
				return (
					<div>

					</div>
				);
			};

			${1:componentName}.propTypes = {
				$0
			};

			export default ${1:componentName};
		'''
		description: "Creates a stateless React component with PropTypes and ES6 module system"
	classConstructor:
		prefix: "con"
		body: '''
			constructor(props) {
				super(props);
				$0
			}

		'''
		description: "Adds a default constructor for the class that contains props as arguments"
	classConstructorContext:
		prefix: "conc"
		body: '''
			constructor(props, context) {
				super(props, context);
				$0
			}

		'''
		description: "Adds a default constructor for the class that contains props and context as arguments"
	emptyState:
		prefix: "est"
		body: '''
			this.state = {
				$1
			};
		'''
		description: "Creates empty state object. To be used in a constructor."
	componentWillMount:
		prefix: "cwm"
		body: '''

			componentWillMount() {
				$0
			}

		'''
		description: "Invoked once, both on the client and server, immediately before the initial rendering occurs"
	componentDidMount:
		prefix: "cdm"
		body: '''
			componentDidMount() {
				$0
			}

		'''
		description: "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
	componentWillReceiveProps:
		prefix: "cwr"
		body: '''
			componentWillReceiveProps(nextProps) {
				$0
			}

		'''
		description: "Invoked when a component is receiving new props. This method is not called for the initial render."
	shouldComponentUpdate:
		prefix: "scu"
		body: '''
			shouldComponentUpdate(nextProps, nextState) {
				$0
			}

		'''
		description: "Invoked before rendering when new props or state are being received. "
	componentWillUpdate:
		prefix: "cwup"
		body: '''
			componentWillUpdate(nextProps, nextState) {
				$0
			}

		'''
		description: "Invoked immediately before rendering when new props or state are being received."
	componentDidUpdate:
		prefix: "cdup"
		body: '''
			componentDidUpdate(prevProps, prevState) {
				$0
			}

		'''
		description: "Invoked immediately after the component's updates are flushed to the DOM."
	componentWillUnmount:
		prefix: "cwun"
		body: '''
			componentWillUnmount() {
				$0
			}

		'''
		description: "Invoked immediately before a component is unmounted from the DOM."
	componentRender:
		prefix: "ren"
		body: '''
			render() {
				return (
					<div>
						$0
					</div>
				);
			}
		'''
		description: "When called, it should examine this.props and this.state and return a single child element."
	componentSetStateObject:
		prefix: "sst"
		body: "this.setState($0);"
		description: "Performs a shallow merge of nextState into current state"
	componentSetStateFunc:
		prefix: "ssf"
		body: '''
			this.setState((state, props) => { return { $0 }});

		'''
		description: "Performs a shallow merge of nextState into current state"
	componentProps:
		prefix: "props"
		body: "this.props.$0"
		description: "Access component's props"
	componentState:
		prefix: "state"
		body: "this.state.$0"
		description: "Access component's state"
	bindThis:
		prefix: "bnd"
		body: "this.$1 = this.$1.bind(this);$0"
		description: "Binds the this of a method. To be used inside a constructor"
	propTypes:
		prefix: "rpt"
		body: '''
			$1.propTypes = {
				$2
			};
		'''
		description: "Creates empty propTypes declaration"
	propTypeArray:
		prefix: "pta"
		body: "PropTypes.array,"
		description: "Array prop type"
	propTypeArrayRequired:
		prefix: "ptar"
		body: "PropTypes.array.isRequired,"
		description: "Array prop type required"
	propTypeBool:
		prefix: "ptb"
		body: "PropTypes.bool,"
		description: "Bool prop type"
	propTypeBoolRequired:
		prefix: "ptbr"
		body: "PropTypes.bool.isRequired,"
		description: "Bool prop type required"
	propTypeFunc:
		prefix: "ptf"
		body: "PropTypes.func,"
		description: "Func prop type"
	propTypeFuncRequired:
		prefix: "ptfr"
		body: "PropTypes.func.isRequired,"
		description: "Func prop type required"
	propTypeNumber:
		prefix: "ptn"
		body: "PropTypes.number,"
		description: "Number prop type"
	propTypeNumberRequired:
		prefix: "ptnr"
		body: "PropTypes.number.isRequired,"
		description: "Number prop type required"
	propTypeObject:
		prefix: "pto"
		body: "PropTypes.object,"
		description: "Object prop type"
	propTypeObjectRequired:
		prefix: "ptor"
		body: "PropTypes.object.isRequired,"
		description: "Object prop type required"
	propTypeString:
		prefix: "pts"
		body: "PropTypes.string,"
		description: "String prop type"
	propTypeStringRequired:
		prefix: "ptsr"
		body: "PropTypes.string.isRequired,"
		description: "String prop type required"
	propTypeNode:
		prefix: "ptnd"
		body: "PropTypes.node,"
		description: "Anything that can be rendered: numbers, strings, elements or an array"
	propTypeNodeRequired:
		prefix: "ptndr"
		body: "PropTypes.node.isRequired,"
		description: "Anything that can be rendered: numbers, strings, elements or an array required"
	propTypeElement:
		prefix: "ptel"
		body: "PropTypes.element,"
		description: "React element prop type"
	propTypeElementRequired:
		prefix: "ptelr"
		body: "PropTypes.element.isRequired,"
		description: "React element prop type required"
	propTypeInstanceOf:
		prefix: "pti"
		body: "PropTypes.instanceOf($0),"
		description: "Is an instance of a class prop type"
	propTypeInstanceOfRequired:
		prefix: "ptir"
		body: "PropTypes.instanceOf($0).isRequired,"
		description: "Is an instance of a class prop type required"
	propTypeEnum:
		prefix: "pte"
		body: "PropTypes.oneOf(['$0']),"
		description: "Prop type limited to specific values by treating it as an enum"
	propTypeEnumRequired:
		prefix: "pter"
		body: "PropTypes.oneOf(['$0']).isRequired,"
		description: "Prop type limited to specific values by treating it as an enum required"
	propTypeOneOfType:
		prefix: "ptet"
		body: '''
			PropTypes.oneOfType([
				$0
			]),
		'''
		description: "An object that could be one of many types"
	propTypeOneOfTypeRequired:
		prefix: "ptetr"
		body: '''
			PropTypes.oneOfType([
				$0
			]).isRequired,
		'''
		description: "An object that could be one of many types required"
	propTypeArrayOf:
		prefix: "ptao"
		body: "PropTypes.arrayOf($0),"
		description: "An array of a certain type"
	propTypeArrayOfRequired:
		prefix: "ptaor"
		body: "PropTypes.arrayOf($0).isRequired,"
		description: "An array of a certain type required"
	propTypeObjectOf:
		prefix: "ptoo"
		body: "PropTypes.objectOf($0),"
		description: "An object with property values of a certain type"
	propTypeObjectOfRequired:
		prefix: "ptoor"
		body: "PropTypes.objectOf($0).isRequired,"
		description: "An object with property values of a certain type required"
	propTypeShape:
		prefix: "ptsh"
		body: '''
			PropTypes.shape({
				$0
			}),
		'''
		description: "An object taking on a particular shape"
	propTypeShapeRequired:
		prefix: "ptshr"
		body: '''
			PropTypes.shape({
				$0
			}).isRequired,
		'''
		description: "An object taking on a particular shape required"