├── .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/}${1/([^ ]+).*/$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 |
--------------------------------------------------------------------------------