Awesome
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
(useReact.findDOMNode
),ismounted
,mixins
,replaceProps
,replaceState
,setProps
,statics
.