webbushka / Atom React Snippets
esnext React snippets
Stars: ✭ 146
Programming Languages
javascript
184084 projects - #8 most used programming language
esnext
17 projects
Projects that are alternatives of or similar to Atom React Snippets
Markdown Themeable Pdf
ARCHIVED. NOT MAINTAINED. Themeable Markdown Converter (Print to PDF, HTML, JPEG or PNG)
Stars: ✭ 130 (-10.96%)
Mutual labels: atom, atom-package, atom-editor
Mighty React Snippets
Crafty React & Redux snippets for Atom Editor
Stars: ✭ 16 (-89.04%)
Mutual labels: atom, atom-package, atom-editor
Github
Git and GitHub integration for Atom
Stars: ✭ 880 (+502.74%)
Mutual labels: atom, atom-package, atom-editor
language-mjml
Atom Editor package providing syntax support for MJML
Stars: ✭ 48 (-67.12%)
Mutual labels: atom, atom-package, atom-editor
atom-carbon-now-sh
Atom package to open the current editor content in https://carbon.now.sh/
Stars: ✭ 15 (-89.73%)
Mutual labels: atom, atom-package, atom-editor
atom-ide-crystal
Crystal IDE package for Atom using the Scry Language Server
Stars: ✭ 24 (-83.56%)
Mutual labels: atom, atom-package, atom-editor
atom-zurb-foundation
Zurb Foundation 6 for sites snippets.
Stars: ✭ 31 (-78.77%)
Mutual labels: atom, atom-package, atom-editor
Prettier Atom
An atom package for the prettier formatter.
Stars: ✭ 750 (+413.7%)
Mutual labels: atom, atom-package, atom-editor
Color Indent
Use colors to show in a non intrusive manner different indentation levels.
Stars: ✭ 11 (-92.47%)
Mutual labels: atom, atom-package
Alfred Atom
Alfred workflow to browse and open Atom projects
Stars: ✭ 41 (-71.92%)
Mutual labels: atom, atom-editor
Atom File Types
Specify additional file types for languages.
Stars: ✭ 54 (-63.01%)
Mutual labels: atom, atom-package
Go Signature Statusbar
Display the signature of the current Go function under the cursor in the status bar of Atom
Stars: ✭ 44 (-69.86%)
Mutual labels: atom, atom-package
Apex Syntax
Apex monochrome Atom theme syntax.
Stars: ✭ 127 (-13.01%)
Mutual labels: atom, atom-editor
Vuejs Snippets
Collection of Vuejs 2.0+ snippets
Stars: ✭ 17 (-88.36%)
Mutual labels: atom, atom-package
Atom Pull Requests
View/Edit comments on a Pull Request directly inside the Atom Editor
Stars: ✭ 47 (-67.81%)
Mutual labels: atom, atom-editor
Atom Terminal Panel
Advanced terminal interface for Atom editor
Stars: ✭ 95 (-34.93%)
Mutual labels: atom-package, atom-editor
Nord Atom Ui
An arctic, north-bluish clean and elegant minimal Atom UI theme.
Stars: ✭ 94 (-35.62%)
Mutual labels: atom, atom-editor
Atom Terminal Tab
Simple terminal for the Atom text editor.
Stars: ✭ 134 (-8.22%)
Mutual labels: atom, atom-package
Atom React.js Snippets 
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.
Install
Go to Packages > Settings View > Open once in settings go to the Install tab and search for react-snippets
Restart Atom
Development
$ cd ~/.atom/packages
$ git clone https://github.com/webbushka/atom-react-snippets.git
$ cd atom-react-snippets
$ apm install
$ apm link
Snippets
The ⇥ 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 |
_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, |
Contributing
- 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
License
MIT License © Zeno Rocha
Credit
The React.js snippets were originally created by orktes in Atom React in ES5 syntax.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].