JavaScript/React/Redux/React-native snippets for Vim (UltiSnips)

javascript.snippets

###########################################################################
#                          REACT SNIPPETS                                 #
###########################################################################
snippet ccom "Class React Component" bA
class $1 extends Component {
	render() {
		return (
			<$2>
				$0
			</$2>
		);
	}
}

export default $1;
endsnippet

snippet eb "Bind function to this in constructor" w
this.$1 = this.$1.bind(this);$0
endsnippet

snippet fcom "Functional Component" bA
const $1 = ({ $2 }) => (
		$3
);

$1.propTypes = {

};

export default $1;
endsnippet


snippet reim "React import" bA
import React from 'react';$0
endsnippet

snippet nimp "Import" bA
import $1 from '$2';$0
endsnippet

snippet cdm "Component did mount" b
componentDidMount() {
	${1}
}$0
endsnippet

snippet cdup "Component did update" b
componentDidUpdate(prevProps, prevState) {
	${1}
}$0
endsnippet

snippet cwm "Component will mount" b
componentWillMount() {
	${1}
}$0
endsnippet

snippet cwr "Component will receive props" b
componentWillReceiveProps(nextProps) {
	${1}
}$0
endsnippet

snippet cwun "Component will unmount" b
componentWillUnmount() {
	${1}
}$0
endsnippet

snippet cwu "Component will update" b
componentWillUpdate(nextProps, nextState) {
	${1}
}$0
endsnippet

snippet fup "Force update"
forceUpdate(${1:callback})
endsnippet

snippet gdp "Get default props" b
getDefaultProps() {
	return {
		${1}
	}
}$0
endsnippet

snippet gis "Get initial state" b
getInitialState() {
	return {
		${1}: ${2}
	}
}$0
endsnippet

snippet ism "Is mounted"
isMounted()
endsnippet

snippet cpt "PropTypes" b
static propTypes = {
	$1
};
endsnippet

snippet fpt "Functional Component propTypes"
$1.propTypes = {
	$2
};
endsnippet

snippet ren "render" b
render() {
	return (
		$1
	)
}$0
endsnippet

snippet sst "Set state" b
this.setState({
	${1}: ${2}
})$0
endsnippet

snippet scu "Should component update"
shouldComponentUpdate(nextProps, nextState) {
	${1}
}$0
endsnippet

snippet props "Get property" i
this.props.${1}
endsnippet

snippet state "Get state" i
this.state.${1}
endsnippet

snippet trp "Transfer props to"
this.transferPropsTo(${VISUAL}$0)
endsnippet

# This snippet will only works if the keyword 'con' is the first word of line
snippet con "Constructor for React.Component" b
constructor(props) {
	super(props);

	this.state = {
		$1: $2
	}
}$0

endsnippet

snippet ev "event handler react"
/**
*
*/
${VISUAL} = ($1) => {
  $2
}
endsnippet

#############################################################################
#                          REDUX SNIPPETS
#############################################################################

snippet rdxc "a template of a container"
import { connect } from 'react-redux';

import $3 from '$4';$0

const mapStateToProps = (state) = ({
	$1
});

const mapDispatchToProps = (dispatch) => ({
	$2
});

export default connect(
	mapStateToProps,
	mapDispatchToProps
)($3);

endsnippet

snippet action "Action Creator" b
const $1 = ($2) => ({
	$3
});
endsnippet

snippet mstp "Map state to props" b
const mapStateToProps = (state) => ({
	$1
});
endsnippet

snippet mdtp "Map dispatch to props" b
const mapDispatchToProps = (dispatch) => ({
	$1
});
endsnippet

snippet connect "react redux connect"
connect(
	mapStateToProps,
	mapDispatchToProps
)($1)
endsnippet

snippet rdo "Reducer" b
const $1 = (state = {}, action) => {
	switch(action.type) {
		case $2:
      $3
		default:
			return state;
	}
};
endsnippet

snippet rda "Reducer array" b
const $1 = (state = [], action) => {
	switch(action.type) {
		case $2:
      $3
		default:
			return state;
	}
};
endsnippet


#############################################################################
#                         REACT NATIVE                                      #
#############################################################################

snippet rnim "React native import" 
import { ${0:${VISUAL}} } from 'react-native';
endsnippet

snippet rnstyle "React native style boilerplate"
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  $1 
});

export default styles;
endsnippet