Sublime Text React Snippets

Sublime Text snippets for writing React components.

These snippets (based on sublime-react's) use ES6 concise method definitions and only use semicolons where necessary.

Snippets

cct → childContextTypes: { ... }

childContextTypes: {
  ${1}: React.PropTypes.${2:string}
},

cdm → componentDidMount() { ... }

componentDidMount() {
  ${1}
},

cdup → componentDidUpdate() { ... }

componentDidUpdate(prevProps, prevState) {
  ${1}
},

class → className

className=${2:"${1}"}

cts → contextTypes: { ... }

contextTypes: {
  ${1}: React.PropTypes.${2:string}
},

cwm → componentWillMount() { ... }

componentWillMount() {
  ${1}
},

cwr → componentWillReceiveProps() { ... }

componentWillReceiveProps(nextProps) {
  ${1}
},

cwu → componentWillUpdate() { ... }

componentWillUpdate(nextProps, nextState) {
  ${1}
},

cwun → componentWillUnmount() { ... }

componentWillUnmount() {
  ${1}
},

dp → let {...} = this.props

let {${1}} = this.props

ds → var {...} = this.state

let {${1}} = this.state

dsi → dangerouslySetInnerHTML

dangerouslySetInnerHTML={${3:{__html: ${2:'${1}'}}}}

fdn → findDOMNode(...)

ReactDOM.findDOMNode(${1})

fup → forceUpdate(...)

this.forceUpdate(${1})

gcc → getChildContext() { ... }

getChildContext() {
  return {
    ${1}: ${2}
  }
},

gdp → getDefaultProps() { ... }

getDefaultProps() {
  return {
    ${1}: ${2}
  }
},

gis → getInitialState() { ... }

getInitialState() {
  return {
    ${1}: ${2}
  }
},

ism → isMounted()

this.isMounted()

props → this.props.

this.props.${1}

pt → propType

${1}: React.PropTypes.${2:string}

pts → propTypes: { ... }

propTypes: {
  ${1}: React.PropTypes.${2:string}
},

rcc → component

let ${1} = React.createClass({
  render() {
    return <${3:div}${2: className="${1}"}>
      ${4}
    </${3:div}>
  }
})

rce → React.cloneElement(...)

React.cloneElement(${1:this.props.children}, {${2}})

rcec → React.cloneElement(children, {...})

React.cloneElement(this.props.children, {${1}})

rcf → component function

let ${1} = ({${2}}) => <${4:div}${3: className="${1}"}>
  ${5}
</${4:div}>

rcm → component module

import React from 'react'

let ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} = React.createClass({
  render() {
    return <${3:div}${2: className="${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}"}>
      ${4}
    </${3:div}>
  }
})

export default ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}

rdn → findDOMNode(this.refs.)

ReactDOM.findDOMNode(this.refs.${1})

rdr → ReactDOM.render()

ReactDOM.render(<${1}/>, ${3:document.querySelector('#${2:app}')})

rec → extend Component

class ${1} extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <${3:div}${2: className="${1}"}>
      ${4}
    </${3:div}>
  }
})

rem → extend Component module

import React, {Component} from 'react'

export default class ${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}} extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <${3:div}${2: className="${1:${TM_FILENAME/(.?\w*)(?:\.\w+)*$/$1/g}}"}>
      ${4}
    </${3:div}>
  }
})

ren → render() { ... }

render() {
  return <div>
    ${1}
  </div>
}

rrm → React render() module

import React from 'react'
import {render} from 'react-dom'

import ${1} from '${2:./}${1}'

render(<${1}${3}/>, ${5:document.querySelector('#${4:app}')})

scu → shouldComponentUpdate() { ... }

shouldComponentUpdate(nextProps, nextState) {
  ${1}
},

sst → this.setState({ ... })

this.setState({
  ${1}: ${2}
})

state → this.state.

this.state.${1}

MIT Licensed