Next generation JavaScript and React snippets for Sublime
Clone or download
xtuc Merge pull request #33 from brownieboy/new-proptypes-format#28
Change React.PropTypes to just PropTypes
Latest commit 17f0db5 Feb 26, 2018
Permalink
Failed to load latest commit information.
.no-sublime-package Add ".no-sublime-package" May 10, 2015
README.md Update README.md Nov 24, 2017
react_componentDidMount.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentDidMount_(class).sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentDidUpdate.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentDidUpdate_(class).sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillMount.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillMount_(class).sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillReceiveProps.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillReceiveProps_(class).sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillUnmount.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillUnmount_(class).sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillUpdate.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_componentWillUpdate_(class).sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_component_class.sublime-snippet beautify react class Feb 27, 2016
react_component_legacy.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_findDOMNode.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_getDefaultProps.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_getInitialState.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_propTypes.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_arrayInstanceOf.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_arrayOf.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_bool.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_element.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_func.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_instanceOf.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_node.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_number.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_object.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_objectOf.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_oneOf.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_oneOfType.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_shape.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_propTypes_string.sublime-snippet Change React.PropTypes to just PropTypes Feb 24, 2018
react_render.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_setState.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_shouldComponentUpdate.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_shouldComponentUpdate_(class).sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_this-props.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_this-state.sublime-snippet Add React snippets and flesh out the readme Apr 20, 2015
react_wrap.sublime-snippet Handle single line selection in "react_wrap" May 10, 2015

README.md

babel-sublime-snippets

Sublime snippets for React in ES5 and ES6 flavors.

Installation

Find it as Babel Snippets through Package Control.

Using the "React: wrap in a component" snippet

First, select a block of JSX. Then, from the Command Palette select "React: wrap in a component". Or, you can set up a key binding.

To set a key binding, go to "Preferences: Key Bindings - User" from the Command Palette and add an entry like this:

{
  "keys": ["ctrl+shift+,"],
  "command": "insert_snippet",
  "args": {
    "name": "Packages/Babel Snippets/react_wrap.sublime-snippet"
  }
}

Available snippets

React

Trigger Content
rcc→ class component skeleton
rcc→ legacy component skeleton
cdm→ componentDidMount() {…}
cdup→ componentDidUpdate(prevProps, prevState) {…}
cwm→ componentWillMount() {…}
cwr→ componentWillReceiveProps(nextProps) {…}
cwun→ componentWillUnmount() {…}
cwup→ componentWillUpdate(nextProps, nextState) {…}
fdn→ React.findDOMNode(…)
gdp→ getDefaultProps() {…}
gis→ getInitialState() {…}
ren→ render() {…}
sst→ this.setState(…)
scu→ shouldComponentUpdate(nextProps, nextState) {…}
props→ this.props
state→ this.state
pt→ propTypes { ... }
pta→ PropTypes.arrayOf
ptai→ PropTypes.arrayOf (Instances)
ptb→ PropTypes.bool
pte→ PropTypes.element
ptf→ PropTypes.func
pti→ PropTypes.instanceOf
ptn→ PropTypes.number
ptn→ PropTypes.node
pto→ PropTypes.object
ptof→ PropTypes.oneOf (Enum)
ptof→ PropTypes.objectOf
ptoft→ PropTypes.oneOfType (Union)
pts→ PropTypes.string
ptsp→ PropTypes.shape

Notes

  • Unsupported React API snippets: displayName, forceUpdate, getDOMNode (use React.findDOMNode), ismounted, mixins, replaceProps, replaceState, setProps, statics.

Snippet(ing)

Read Extending Sublime Text » Snippets.