Skip to content

Instantly share code, notes, and snippets.

@srishanbhattarai
Last active July 9, 2019 01:45
Show Gist options
  • Save srishanbhattarai/e81cc491bec1dc34ce89bd0bc60eb298 to your computer and use it in GitHub Desktop.
Save srishanbhattarai/e81cc491bec1dc34ce89bd0bc60eb298 to your computer and use it in GitHub Desktop.
JavaScript/React/Redux/React-native snippets for Vim (UltiSnips)
###########################################################################
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment