An Atom snippet library for React. This library uses ES6 syntax, if you would prefer ES5 or Coffeescript snippets please use the Atom React Package.
Go to Packages > Settings View > Open once in settings go to the Install tab and search for react-snippets
Restart Atom
$ cd ~/.atom/packages
$ git clone https://github.com/webbushka/atom-react-snippets.git
$ cd atom-react-snippets
$ apm install
$ apm linkThe ⇥ means the TAB key
| Trigger | Content |
|---|---|
_i→ |
import empty |
_ir→ |
import react |
_irc→ |
import react and component |
_irp→ |
import react and prop-types |
_ipt→ |
import prop-types |
_ircp→ |
import react, component and prop-types |
_ird→ |
import react-dom |
_ex→ |
export |
_exd→ |
export default |
_cdm→ |
componentDidMount method |
_cwm→ |
componentWillMount method |
_cwr→ |
componentWillReceiveProps method |
_scu→ |
shouldComponentUpdate method |
_cwup→ |
componentWillUpdate method |
_cdup→ |
componentDidUpdate method |
_cwun→ |
componentWillUnmount method |
_cdc→ |
componentDidCatch method |
_cx→ |
cx |
_fup→ |
forceUpdate |
_cct→ |
component contextTypes |
_cpt→ |
component propTypes |
_cdp→ |
component defaultProps |
_scct→ |
static component contextTypes |
_scpt→ |
static component propTypes |
_scdp→ |
static component defaultProps |
_cer→ |
class component skeleton |
_rsc→ |
stateless component skeleton |
_rscp→ |
stateless component skeleton with PropTypes |
_rscr→ |
stateless component skeleton with explicit return |
_rscc→ |
stateless component skeleton with handleClick |
_rsf→ |
stateless function |
_cdn→ |
component display name |
_ren→ |
render() method |
_sst→ |
setState() |
_props→ |
this.props. |
_state→ |
this.state. |
_rrc→ |
React.render() |
_frag→ |
<React.Fragment></React.Fragment> |
_cns→ |
constructor method |
_clss→ |
class extends |
_dnghtml→ |
dangerouslySetInnerHTML |
In this version the PropTypes snippets prefix has changed to _pt instead of rp. All snippets have two versions to allow for required and not required types.
| Trigger | Content |
|---|---|
_pta→ |
PropTypes.array, |
_ptar→ |
PropTypes.array.isRequired, |
_ptb→ |
PropTypes.bool, |
_ptbr→ |
PropTypes.bool.isRequired, |
_ptf→ |
PropTypes.func, |
_ptfr→ |
PropTypes.func.isRequired, |
_ptn→ |
PropTypes.number, |
_ptnr→ |
PropTypes.number.isRequired, |
_pto→ |
PropTypes.object., |
_ptor→ |
PropTypes.object.isRequired, |
_pts→ |
PropTypes.string, |
_ptsr→ |
PropTypes.string.isRequired, |
_ptnd→ |
PropTypes.node, |
_ptndr→ |
PropTypes.node.isRequired, |
_ptel→ |
PropTypes.element, |
_ptelr→ |
PropTypes.element.isRequired, |
_pti→ |
PropTypes.instanceOf(ClassName), |
_ptir→ |
PropTypes.instanceOf(ClassName).isRequired, |
_pte→ |
PropTypes.oneOf(['News', 'Photos']), |
_pter→ |
PropTypes.oneOf(['News', 'Photos']).isRequired, |
_ptet→ |
PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
_ptetr→ |
PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, |
_ptao→ |
PropTypes.arrayOf(PropTypes.number), |
_ptaor→ |
PropTypes.arrayOf(PropTypes.number).isRequired, |
_ptoo→ |
PropTypes.objectOf(PropTypes.number), |
_ptoor→ |
PropTypes.objectOf(PropTypes.number).isRequired, |
_ptsh→ |
PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}), |
_ptshr→ |
PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired, |
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
MIT License © Zeno Rocha
The React.js snippets were originally created by orktes in Atom React in ES5 syntax.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent