Sublime Text Completions and Snippets for React

!react-sublime-snippets.md

• Place these in your Packages/User/Snippets folder
• Use any of them with their tab trigger value.
• call snippets using the first letter of each word plus the entire last word (e.g. rpch.. => react-proptypes-children.sublime-snippet

eslint-disable-line.sublime-snippet

<snippet>
    <content><![CDATA[// eslint-disable-line ${1:lint}]]></content>
    <tabTrigger>edline</tabTrigger>
</snippet>

eslint-disable-nextline.sublime-snippet

<snippet>
    <content><![CDATA[// eslint-disable-next-line ${1:lint}]]></content>
    <tabTrigger>esnextline</tabTrigger>
</snippet>

eslint-disable.sublime-snippet

<snippet>
    <content><![CDATA[/* eslint-disable ${1:lint} */]]></content>
    <tabTrigger>edisable</tabTrigger>
</snippet>

eslint-enable.sublime-snippet

<snippet>
    <content><![CDATA[/* eslint-enable ${1:lint} */]]></content>
    <tabTrigger>eenable</tabTrigger>
</snippet>

react-component-class.sublime-snippet

<snippet>
    <content><![CDATA[
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};

]]></content>
<tabTrigger>rcclass</tabTrigger>
<description>ES6 React Component</description>
</snippet>

react-component-componentDidMount.sublime-snippet

<snippet>
    <content><![CDATA[
componentDidMount() {
    ${1}
}
]]></content>
<tabTrigger>rcDidMount</tabTrigger>
</snippet>

react-component-didUpdate.sublime-snippet

<snippet>
    <content><![CDATA[
componentDidUpdate(prevProps, prevState) {
    ${1}
}
]]></content>
<tabTrigger>rcdidUpdate</tabTrigger>
</snippet>

react-component-function.sublime-snippet

<snippet>
    <content><![CDATA[
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};

]]></content>
<tabTrigger>rcfunction</tabTrigger>
<description>Functional React component</description>
</snippet>

react-component-shouldUpdate.sublime-snippet

<snippet>
    <content><![CDATA[
shouldComponentUpdate(nextProps, nextState) {
    return ${1};
}
]]></content>
<tabTrigger>rcshouldUpdate</tabTrigger>
</snippet>

react-component-willMount.sublime-snippet

<snippet>
    <content><![CDATA[
componentWillMount() {
    ${1}
}
]]></content>
<tabTrigger>rcwillMount</tabTrigger>
</snippet>

react-component-willReceiveProps.sublime-snippet

<snippet>
    <content><![CDATA[
componentWillReceiveProps(nextProps) {
    ${1}
}
]]></content>
<tabTrigger>rcwillReceiveProps</tabTrigger>
</snippet>

react-component-willUnmount.sublime-snippet

<snippet>
    <content><![CDATA[
componentWillUnmount() {
    ${1}
}
]]></content>
<tabTrigger>rcwillUnmount</tabTrigger>
</snippet>

react-component-willUpdate.sublime-snippet

<snippet>
    <content><![CDATA[
componentWillUpdate(nextProps, nextState) {
    ${1}
}
]]></content>
<tabTrigger>rcwillUpdate</tabTrigger>
</snippet>

react-import.sublime-snippet

<snippet>
    <content><![CDATA[
import ${1:Package} from '${2:path}';
]]></content>
<tabTrigger>rimport</tabTrigger>
</snippet>

react-prop.sublime-snippet

<snippet>
  <content><![CDATA[
${1:name}: rp${2:}
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rp</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-array.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.array
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rparray</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-arrayOf.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.arrayOf(${1:[
  ${2:// _proptype...}
]})
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rparrayOf</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-bool.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.bool
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpbool</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-children.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.oneOfType([
  PropTypes.element,
  PropTypes.arrayOf(PropTypes.element),
])
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpchildren</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-element.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.element
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpelement</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-func.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.func
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpfunc</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-node.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.node
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpnode</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-number.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.number
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpnumber</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-object.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.object
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpobject</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-objectOf.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.objectOf(${1:[
  ${2:// _proptype...}
]})
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpobjectOf</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-oneOfType.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.oneOfType(${1:[
  ${2:// _proptype...}
]})
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rponeOfType</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-shape.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.shape(${1:{
  ${2:// _prop...}
\}})
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpshape</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-string.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.string
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpstring</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes-symbol.sublime-snippet

<snippet>
  <content><![CDATA[
PropTypes.symbol
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rpsymbol</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>meta.group.braces.curly</scope>
</snippet>

react-proptypes.sublime-completions

{
   "scope": "source.js meta.group.braces.curly",
   "completions":
   [
   ]
}

react-proptypes.sublime-snippet

<snippet>
  <content><![CDATA[
const propTypes = {
  ${1:// _prop...}
};
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>rproptypes</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>source.js</scope>
</snippet>

react-redux-action.sublime-snippet

<snippet>
    <content><![CDATA[
export const ${1:action} = (${2:payload}) => ({
    type: ${3:type},
    ${2:payload}
});
]]></content>
<tabTrigger>rraction</tabTrigger>
</snippet>

react-redux-component.sublime-snippet

<snippet>
    <content><![CDATA[
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});

]]></content>
<tabTrigger>rrcomponent</tabTrigger>
</snippet>

react-redux-reducer.sublime-snippet

<snippet>
    <content><![CDATA[
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};

]]></content>
<tabTrigger>rrreducer</tabTrigger>
</snippet>