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 |
|---|---|
im→ | 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 |
irs→ | import react and useState |
ire→ | import react and useEffect |
irse→ | import react, useState and useEffect |
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() |
ust→ | use state const [x, setX] = useState() |
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.