A fork of burkeholland/simple-react-snippets.
This fork applies some pull requests that have not yet been megerged in the original project because their author is inactive.
The essential collection of React Snippets and commands.
This needs coc-snippets to work properly.
Run in your Neovim: :CocInstall coc-simple-react-snippets coc-snippets
Or to get the latest version: :CocInstall https://github.com/UltiRequiem/coc-simple-react-snippets
Only what you need and nothing more. No Redux. No React Native.
Simply, simple React snippets.
These snippets were selected carefully from my own day-to-day React use. Not everything in React is included here. This is a hand selected set of snippets that work the way that you would expect, not just a copy of the documentation.
Snippet | Renders |
---|---|
imr |
Import React |
imrc |
Import React / Component |
imrd |
Import ReactDOM |
imrs |
Import React / useState |
imrse |
Import React / useState useEffect |
impt |
Import PropTypes |
impc |
Import React / PureComponent |
cc |
Class Component |
ccc |
Class Component With Constructor |
cpc |
Class Pure Component |
sfc |
Stateless Function Component |
cdm |
componentDidMount |
uef |
useEffect Hook |
cwm |
componentWillMount |
cwrp |
componentWillReceiveProps |
gds |
getDerivedStateFromProps |
scu |
shouldComponentUpdate |
cwu |
componentWillUpdate |
cdu |
componentDidUpdate |
cwu |
componentWillUpdate |
cdc |
componentDidCatch |
gsbu |
getSnapshotBeforeUpdate |
ss |
setState |
ssf |
Functional setState |
usf |
Declare a new state variable using State Hook |
ren |
render |
rprop |
Render Prop |
hoc |
Higher Order Component |
import * as React from 'react'
import * as React from 'react'
import { Component } from 'react'
import ReactDOM from 'react-dom'
import * as React from 'react'
import { useState } from 'react'
import * as React from 'react'
import { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import * as React from 'react'
import { PureComponent } from 'react'
class | extends Component {
state = { | },
render() {
return ( | );
}
}
export default |;
class | extends Component {
constructor(props) {
super(props);
this.state = { | };
}
render() {
return ( | );
}
}
export default |;
class | extends PureComponent {
state = { | },
render() {
return ( | );
}
}
export default |;
const | = props => {
return ( | );
};
export default |;
componentDidMount() {
|
}
useEffect(() => {
|
}, []);
//WARNING! To be deprecated in React v17. Use componentDidMount instead.
componentWillMount() {
|
}
//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
componentWillReceiveProps(nextProps) {
|
}
static getDerivedStateFromProps(nextProps, prevState) {
|
}
shouldComponentUpdate(nextProps, nextState) {
|
}
//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
componentWillUpdate(nextProps, nextState) {
|
}
componentDidUpdate(prevProps, prevState) {
|
}
componentWillUnmount() {
|
}
componentDidCatch(error, info) {
|
}
getSnapshotBeforeUpdate(prevProps, prevState) {
|
}
this.setState({ | : | });
this.setState(prevState => {
return { | : prevState.| }
});
const [|, set|] = useState();
Hit Tab to apply CamelCase to function. e.g. [count, setCount]
render() {
return (
|
);
}
class | extends Component {
state = { | },
render() {
return this.props.render({
|: this.state.|
});
}
}
export default |;
function | (|) {
return class extends Component {
constructor(props) {
super(props);
}
render() {
return < | {...this.props} />;
}
};
}