Simple React Snippets

The essential collection of React Snippets and commands.

Installation

> Depends on coc-snippets

In your (n)vim👇

``
:CocInstall coc-simple-react-snippets coc-snippets
`

Features

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.

Snippets

| 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 |

Full Expansions

$3

`javascript
import * as React from "react";
`

$3

`javascript
import * as React from "react";
import { Component } from "react";
`

$3

`javascript
import ReactDOM from "react-dom";
`

$3

`javascript
import * as React from "react";
import { useState } from "react";
`

$3

`javascript
import * as React from "react";
import { useEffect, useState } from "react";
`

$3

`javascript
import PropTypes from "prop-types";
`

$3

`javascript
import * as React from "react";
import { PureComponent } from "react";
`

$3

`javascript
class | extends Component {
state = { | },
render() {
return ( | );
}
}

export default |;
`

$3

`javascript
class | extends Component {
constructor(props) {
super(props);
this.state = { | };
}
render() {
return ( | );
}
}

export default |;
`

$3

`javascript
class | extends PureComponent {
state = { | },
render() {
return ( | );
}
}

export default |;
`

$3

`javascript
const | = props => {
return ( | );
};

export default |;
`

$3

`javascript
componentDidMount() {
|
}
`

$3

`javascript
useEffect(() => {
|
}, []);
`

$3

`javascript
//WARNING! To be deprecated in React v17. Use componentDidMount instead.
componentWillMount() {
|
}
`

$3

`javascript
//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
componentWillReceiveProps(nextProps) {
|
}
`

$3

`javascript
static getDerivedStateFromProps(nextProps, prevState) {
|
}
`

$3

`javascript
shouldComponentUpdate(nextProps, nextState) {
|
}
`

$3

`javascript
//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
componentWillUpdate(nextProps, nextState) {
|
}
`

$3

`javascript
componentDidUpdate(prevProps, prevState) {
|
}
`

$3

`javascript
componentWillUnmount() {
|
}
`

$3

`javascript
componentDidCatch(error, info) {
|
}
`

$3

`javascript
getSnapshotBeforeUpdate(prevProps, prevState) {
|
}
`

$3

`javascript
this.setState({ | : | });
`

$3

`javascript
this.setState(prevState => {
return { | : prevState.| }
});
`

$3

`javascript
const [|, set|] = useState();
`

_Hit Tab to apply CamelCase to function. e.g. [count, setCount]_

$3

`javascript
render() {
return (
|
);
}
`

$3

`javascript
class | extends Component {
state = { | },
render() {
return this.props.render({
|: this.state.|
});
}
}

export default |;
`

$3

`javascript
function | (|) {
return class extends Component {
constructor(props) {
super(props);
}

render() {
return < | {...this.props} />;
}
};
}
``

Support

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 ⭐

Licence

Licensed under the MIT License 📄