Dead simple React snippets you will actually use.
npm install coc-simple-react-snippetsThe essential collection of React Snippets and commands.
> Depends on coc-snippets
In your (n)vim👇
```
:CocInstall coc-simple-react-snippets coc-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 |
`javascript`
import * as React from "react";
`javascript`
import * as React from "react";
import { Component } from "react";
`javascript`
import ReactDOM from "react-dom";
`javascript`
import * as React from "react";
import { useState } from "react";
`javascript`
import * as React from "react";
import { useEffect, useState } from "react";
`javascript`
import PropTypes from "prop-types";
`javascript`
import * as React from "react";
import { PureComponent } from "react";
`javascript
class | extends Component {
state = { | },
render() {
return ( | );
}
}
export default |;
`
`javascript
class | extends Component {
constructor(props) {
super(props);
this.state = { | };
}
render() {
return ( | );
}
}
export default |;
`
`javascript
class | extends PureComponent {
state = { | },
render() {
return ( | );
}
}
export default |;
`
`javascript
const | = props => {
return ( | );
};
export default |;
`
`javascript`
componentDidMount() {
|
}
`javascript`
useEffect(() => {
|
}, []);
`javascript`
//WARNING! To be deprecated in React v17. Use componentDidMount instead.
componentWillMount() {
|
}
`javascript`
//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
componentWillReceiveProps(nextProps) {
|
}
`javascript`
static getDerivedStateFromProps(nextProps, prevState) {
|
}
`javascript`
shouldComponentUpdate(nextProps, nextState) {
|
}
`javascript`
//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
componentWillUpdate(nextProps, nextState) {
|
}
`javascript`
componentDidUpdate(prevProps, prevState) {
|
}
`javascript`
componentWillUnmount() {
|
}
`javascript`
componentDidCatch(error, info) {
|
}
`javascript`
getSnapshotBeforeUpdate(prevProps, prevState) {
|
}
`javascript`
this.setState({ | : | });
`javascript`
this.setState(prevState => {
return { | : prevState.| }
});
`javascript`
const [|, set|] = useState();
_Hit Tab to apply CamelCase to function. e.g. [count, setCount]_
`javascript`
render() {
return (
|
);
}
`javascript
class | extends Component {
state = { | },
render() {
return this.props.render({
|: this.state.|
});
}
}
export default |;
`
`javascript
function | (|) {
return class extends Component {
constructor(props) {
super(props);
}
render() {
return < | {...this.props} />;
}
};
}
``
Open an Issue, I will check it a soon as possible 👀
If you want to hurry me up a bit
send me a tweet 😆
Consider supporting me on Patreon if you like
my work 🙏
Don't forget to star the repo ⭐
Licensed under the MIT License 📄