Sublime Text Completions and Snippets for React

!react-sublime-snippets.md

With UltiSnips

• mkdir -p ~/.vim/UltiSnips/
• cat nerdwallet.snippets >> ~/.vim/UltiSnips/javascript.snippets

Converted from sublime snippets using: https://github.com/rendom/Sublimetext-snippets-to-Ultisnips

Most of the snippets work just fine, some others need some extra translation.

nerdwallet.snippets

snippet eenable
/* eslint-enable ${1:lint} */
endsnippet

snippet edisable
/* eslint-disable ${1:lint} */
endsnippet

snippet edline
// eslint-disable-line ${1:lint}
endsnippet

snippet esnextline
// eslint-disable-next-line ${1:lint}
endsnippet

snippet rcdidUpdate

componentDidUpdate(prevProps, prevState) {
  ${1}
}

endsnippet

snippet rcfunction "Functional React component"

import React, { PropTypes } from 'react';

const displayName = '${1:Component}';

const propTypes = {${2:}};

const defaultProps = {${3:}};

const ${1:Component} = (${4:/* { prop1, prop2 } */}) => {
  return (
    ${5:// jsx}
  );
};

${1:Component}.displayName = displayName;
${1:Component}.propTypes = propTypes;

export default ${1:Component};


endsnippet

snippet rcDidMount

componentDidMount() {
    ${1}
}

endsnippet

snippet rcshouldUpdate

shouldComponentUpdate(nextProps, nextState) {
    return ${1};
}

endsnippet

snippet rcwillUpdate

componentWillUpdate(nextProps, nextState) {
    ${1}
}

endsnippet

snippet rcwillUnmount

componentWillUnmount() {
    ${1}
}

endsnippet

snippet rcwillReceiveProps

componentWillReceiveProps(nextProps) {
    ${1}
}

endsnippet

snippet rcwillMount

componentWillMount() {
    ${1}
}

endsnippet

snippet rimport

import ${1:Package} from '${2:path}';

endsnippet

snippet rparray

PropTypes.array

endsnippet

snippet rparrayOf

PropTypes.arrayOf(${1:[
  ${2:// _proptype...}
]})

endsnippet

snippet rp

${1:name}: rp${2:}

endsnippet

snippet rpelement

PropTypes.element

endsnippet

snippet rpchildren

PropTypes.oneOfType([
  PropTypes.element,
  PropTypes.arrayOf(PropTypes.element),
])

endsnippet

snippet rpbool

PropTypes.bool

endsnippet

snippet rpfunc

PropTypes.func

endsnippet

snippet rpnode

PropTypes.node

endsnippet

snippet rpnumber

PropTypes.number

endsnippet

snippet rpobjectOf

PropTypes.objectOf(${1:[
  ${2:// _proptype...}
]})

endsnippet

snippet rpobject

PropTypes.object

endsnippet

snippet rcclass "ES6 React Component"

import React, { Component, PropTypes } from 'react';

const displayName = ${1:Component};
const propTypes = {${2}};
const defaultProps = {${3}};

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

  render() {
    return (
      ${4}
    );
  }
}

${1:Component}.displayName = displayName;
${1:Component}.propTypes = propTypes;
${1:Component}.defaultProps = defaultProps;

export default ${1:Component};


endsnippet

snippet rpshape

PropTypes.shape(${1:{
  ${2:// _prop...}
}})

endsnippet

snippet rpstring

PropTypes.string

endsnippet

snippet rponeOfType

PropTypes.oneOfType(${1:[
  ${2:// _proptype...}
]})

endsnippet

snippet rpsymbol

PropTypes.symbol

endsnippet

snippet rproptypes

const propTypes = {
  ${1:// _prop...}
};

endsnippet

snippet rraction

export const ${1:action} = (${2:payload}) => ({
    type: ${3:type},
    ${2:payload}
});

endsnippet

snippet rrreducer

import {
    ${2:Action}
} from '${3:path}';

const defaultState = {
    ${4:prop},
};

const ${1:Reducer} = (state = defaultState, action = {}) => {
    switch (action.type) {
        case ${5:type}:
            return {
                ...state,
            };

        default:
            return state;
    }
};

export default ${1:Reducer};


endsnippet

snippet rrcomponent

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import {
    ${2:action} as ${2:action}Action,
} from '${3:path}';

const mapDispatchToProps = (dispatch) => {
    return {
        ${2:action}: () => {
            dispatch(${2:action}Action());
        },
    };
};

const mapStateToProps = ({ state }) => ({
    ${4:prop}: state.${4:prop}
});

export class ${1:Component} extends Component {
    render() {
        const {
            ${2:action}
        } = this.props;

        return (
            ${0}
        );
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(${1:Component});


endsnippet