UltiSnips for React

javascript.snippets

snippet import "Import"
import $1 from ${VISUAL};
endsnippet

snippet import_react "Import React"
import React${1:, { PropTypes, ${2:PureComponent} }} from 'react';
endsnippet

snippet react_component "React PureComponent"
import React, { PropTypes, PureComponent } from 'react';

class ${1:`!v vim_snippets#Filename('$1', 'title')`} extends PureComponent {
  static propTypes = {
  };

  constructor(props) {
    super(props);
  }

  render() {
    return null;
  }
}

export default $1;
endsnippet

snippet react_function_component "React Function Component"
import React, { PropTypes } from 'react';

function ${1:ClassName} {
  return null;
}

$1.propTypes = {
};

export default $1;
endsnippet


snippet cdm "component did mount" b
componentDidMount: function() {
  ${1}
},$0
endsnippet

snippet cdup "component did update" b
componentDidUpdate: function(prevProps, prevState) {
  ${1}
},$0
endsnippet

snippet cwm "component will mount" b
componentWillMount: function() {
  ${1}
},$0
endsnippet

snippet cwr "component will receive props" b
componentWillReceiveProps: function(nextProps) {
  ${1}
},$0
endsnippet

snippet cwun "component will unmount" b
componentWillUnmount: function() {
  ${1}
},$0
endsnippet

snippet cwu "component will update" b
componentWillUpdate: function(nextProps, nextState) {
  ${1}
},$0
endsnippet

snippet cx
cx({
  ${1}: ${2}
});
endsnippet

snippet pt "propTypes" b
propTypes: {
  ${1}: React.PropTypes.${2:string}
},
endsnippet

snippet ren
render: function() {
  return (
    ${1:<div />}
  );
}$0
endsnippet

snippet sst "set state" b
this.setState({
  ${1}: ${2}
});$0
endsnippet

snippet scu "should component update"
shouldComponentUpdate: (nextProps, nextState) => {
  ${1}
},$0
endsnippet


## javascript
snippet ll "console.log"
console.log(${0});
endsnippet