├── .no-sublime-package ├── react_this-props.sublime-snippet ├── react_this-state.sublime-snippet ├── react_findDOMNode.sublime-snippet ├── react_propTypes_bool.sublime-snippet ├── react_propTypes_func.sublime-snippet ├── react_propTypes_node.sublime-snippet ├── react_setState.sublime-snippet ├── react_propTypes_number.sublime-snippet ├── react_propTypes_object.sublime-snippet ├── react_propTypes_string.sublime-snippet ├── react_propTypes_element.sublime-snippet ├── react_propTypes_shape.sublime-snippet ├── react_propTypes.sublime-snippet ├── react_propTypes_arrayOf.sublime-snippet ├── react_propTypes_objectOf.sublime-snippet ├── react_propTypes_instanceOf.sublime-snippet ├── react_propTypes_oneOf.sublime-snippet ├── react_propTypes_oneOfType.sublime-snippet ├── react_wrap.sublime-snippet ├── react_componentDidMount_(class).sublime-snippet ├── react_componentWillMount_(class).sublime-snippet ├── react_componentWillUnmount_(class).sublime-snippet ├── react_propTypes_arrayInstanceOf.sublime-snippet ├── react_componentDidUpdate_(class).sublime-snippet ├── react_componentDidMount.sublime-snippet ├── react_componentWillMount.sublime-snippet ├── react_componentWillReceiveProps_(class).sublime-snippet ├── react_componentWillUpdate_(class).sublime-snippet ├── react_componentWillUpdate.sublime-snippet ├── react_componentWillUnmount.sublime-snippet ├── react_getDefaultProps.sublime-snippet ├── react_getInitialState.sublime-snippet ├── react_shouldComponentUpdate_(class).sublime-snippet ├── react_componentDidUpdate.sublime-snippet ├── react_componentWillReceiveProps.sublime-snippet ├── react_render.sublime-snippet ├── react_shouldComponentUpdate.sublime-snippet ├── react_component_legacy.sublime-snippet ├── react_component_class.sublime-snippet └── README.md /.no-sublime-package: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react_this-props.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | props 6 | source.js 7 | React: this.props 8 | 9 | -------------------------------------------------------------------------------- /react_this-state.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | state 6 | source.js 7 | React: this.state 8 | 9 | -------------------------------------------------------------------------------- /react_findDOMNode.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | fdn 6 | source.js 7 | React: React.findDOMNode(…) 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_bool.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptb 6 | source.js 7 | React: PropTypes.bool 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_func.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptf 6 | source.js 7 | React: PropTypes.func 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_node.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptn 6 | source.js 7 | React: PropTypes.node 8 | 9 | -------------------------------------------------------------------------------- /react_setState.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ${0}}); 4 | ]]> 5 | sst 6 | source.js 7 | React: this.setState(…) 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_number.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptn 6 | source.js 7 | React: PropTypes.number 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_object.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | pto 6 | source.js 7 | React: PropTypes.object 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_string.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | pts 6 | source.js 7 | React: PropTypes.string 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_element.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | pte 6 | source.js 7 | React: PropTypes.element 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_shape.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | ptsp 8 | source.js 9 | React: PropTypes.shape 10 | 11 | -------------------------------------------------------------------------------- /react_propTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | pt 8 | source.js 9 | React: propTypes { ... } 10 | 11 | -------------------------------------------------------------------------------- /react_propTypes_arrayOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | pta 6 | source.js 7 | React: PropTypes.arrayOf 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_objectOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptof 6 | source.js 7 | React: PropTypes.objectOf 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_instanceOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | pti 6 | source.js 7 | React: PropTypes.instanceOf 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_oneOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptof 6 | source.js 7 | React: PropTypes.oneOf (Enum) 8 | 9 | -------------------------------------------------------------------------------- /react_propTypes_oneOfType.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptoft 6 | source.js 7 | React: PropTypes.oneOfType (Union) 8 | 9 | -------------------------------------------------------------------------------- /react_wrap.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | $0${SELECTION/([ \t]*)([^\n]*)/\t$1$2/g} 4 | ${SELECTION/([ \t]*).*/$1/}]]> 5 | source.js 6 | React: wrap in a component 7 | 8 | -------------------------------------------------------------------------------- /react_componentDidMount_(class).sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cdm 8 | source.js meta.class.js -(meta meta) 9 | React: componentDidMount() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillMount_(class).sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwm 8 | source.js meta.class.js -(meta meta) 9 | React: componentWillMount() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillUnmount_(class).sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwun 8 | source.js meta.class.js -(meta meta) 9 | React: componentWillUnmount() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_propTypes_arrayInstanceOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptai 6 | source.js 7 | React: PropTypes.arrayOf (Instances) 8 | 9 | -------------------------------------------------------------------------------- /react_componentDidUpdate_(class).sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cdup 8 | source.js meta.class.js -(meta meta) 9 | React: componentDidUpdate(pp, ps) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentDidMount.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cdm 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: componentDidMount() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillMount.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwm 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: componentWillMount() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillReceiveProps_(class).sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwr 8 | source.js meta.class.js -(meta meta) 9 | React: componentWillReceiveProps(np) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillUpdate_(class).sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwup 8 | source.js meta.class.js -(meta meta) 9 | React: componentWillUpdate(np, ns) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillUpdate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwup 8 | source.js meta.group.braces.curly -(meta meta meta) 9 | React: componentWillUpdate(np, ns) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillUnmount.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwun 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: componentWillUnmount() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_getDefaultProps.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | gdp 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: getDefaultProps() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_getInitialState.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | gis 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: getInitialState() {…} 10 | 11 | -------------------------------------------------------------------------------- /react_shouldComponentUpdate_(class).sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | scu 8 | source.js meta.class.js -(meta meta) 9 | React: shouldComponentUpdate(np, ns) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentDidUpdate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cdup 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: componentDidUpdate(pp, ps) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_componentWillReceiveProps.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cwr 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: componentWillReceiveProps(np) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_render.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ${0}} 6 | );} 7 | } 8 | ]]> 9 | ren 10 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta), source.js meta.class.js -(meta meta) 11 | React: render() {…} 12 | 13 | -------------------------------------------------------------------------------- /react_shouldComponentUpdate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | scu 8 | source.js meta.group.braces.round meta.group.braces.curly -(meta meta meta) 9 | React: shouldComponentUpdate(np, ns) {…} 10 | 11 | -------------------------------------------------------------------------------- /react_component_legacy.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ${0}} 9 | );} 10 | } 11 | }); 12 | 13 | ]]> 14 | rcc 15 | source.js -(meta) 16 | React: legacy component 17 | 18 | -------------------------------------------------------------------------------- /react_component_class.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ${0}} 9 | );} 10 | } 11 | } 12 | 13 | ]]> 14 | rcc 15 | source.js -(meta) 16 | React: class component 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # babel-sublime-snippets 2 | 3 | Sublime snippets for [React](http://facebook.github.io/react/docs/component-specs.html) in ES5 and [ES6](http://kangax.github.io/compat-table/es6/) flavors. 4 | 5 | ## Installation 6 | 7 | Find it as [**Babel Snippets**](https://packagecontrol.io/packages/Babel%20Snippets) through [Package Control](https://packagecontrol.io/). 8 | 9 | ## Using the "React: wrap in a component" snippet 10 | 11 | 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. 12 | 13 | To set a key binding, go to "Preferences: Key Bindings - User" from the Command Palette and add an entry like this: 14 | 15 | ```json 16 | { 17 | "keys": ["ctrl+shift+,"], 18 | "command": "insert_snippet", 19 | "args": { 20 | "name": "Packages/Babel Snippets/react_wrap.sublime-snippet" 21 | } 22 | } 23 | ``` 24 | 25 | ## Available snippets 26 | 27 | ### React 28 | 29 | | Trigger | Content | 30 | | -------: | ------- | 31 | | `rcc→` | class component skeleton | 32 | | `rcc→` | legacy component skeleton | 33 | | `cdm→` | `componentDidMount() {…}` | 34 | | `cdup→` | `componentDidUpdate(prevProps, prevState) {…}` | 35 | | `cwm→` | `componentWillMount() {…}` | 36 | | `cwr→` | `componentWillReceiveProps(nextProps) {…}` | 37 | | `cwun→` | `componentWillUnmount() {…}` | 38 | | `cwup→` | `componentWillUpdate(nextProps, nextState) {…}` | 39 | | `fdn→` | `React.findDOMNode(…)` | 40 | | `gdp→` | `getDefaultProps() {…}` | 41 | | `gis→` | `getInitialState() {…}` | 42 | | `ren→` | `render() {…}` | 43 | | `sst→` | `this.setState(…)` | 44 | | `scu→` | `shouldComponentUpdate(nextProps, nextState) {…}` | 45 | | `props→` | `this.props` | 46 | | `state→` | `this.state` | 47 | | `pt→` | `propTypes { ... }` | 48 | | `pta→` | `PropTypes.arrayOf` | 49 | | `ptai→` | `PropTypes.arrayOf (Instances)` | 50 | | `ptb→` | `PropTypes.bool` | 51 | | `pte→` | `PropTypes.element` | 52 | | `ptf→` | `PropTypes.func` | 53 | | `pti→` | `PropTypes.instanceOf` | 54 | | `ptn→` | `PropTypes.number` | 55 | | `ptn→` | `PropTypes.node` | 56 | | `pto→` | `PropTypes.object` | 57 | | `ptof→` | `PropTypes.oneOf (Enum)` | 58 | | `ptof→` | `PropTypes.objectOf` | 59 | | `ptoft→` | `PropTypes.oneOfType (Union)` | 60 | | `pts→` | `PropTypes.string` | 61 | | `ptsp→` | `PropTypes.shape` | 62 | 63 | ## Notes 64 | 65 | * Unsupported React API snippets: `displayName`, `forceUpdate`, `getDOMNode` (use `React.findDOMNode`), `ismounted`, `mixins`, `replaceProps`, `replaceState`, `setProps`, `statics`. 66 | 67 | ## Snippet(ing) 68 | 69 | Read [Extending Sublime Text » Snippets](http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/snippets.html). 70 | --------------------------------------------------------------------------------