coc-simple-react-snippets v1.3.0

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

Full Expansions

imr - Import React

import * as React from "react";

imrc - Import React, Component

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

imrd - Import ReactDOM

import ReactDOM from "react-dom";

imrs - Import React, useState

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

imrse - Import React, useState, useEffect

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

impt - Import PropTypes

import PropTypes from "prop-types";

impc - Import PureComponent

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

cc - Class Component

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

export default |;

ccc - Class Component With Constructor

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

export default |;

cpc - Class Pure Component

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

export default |;

sfc - Stateless Function Component

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

export default |;

cdm - componentDidMount

componentDidMount() {
  |
}

uef - useEffect Hook

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

cwm - componentWillMount

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

cwrp - componentWillReceiveProps

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

gds - getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {
  |
}

scu - shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  |
}

cwu - componentWillUpdate

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

cdu - componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  |
}

cwun - componentWillUnmount

componentWillUnmount() {
  |
}

cdc - componentDidCatch

componentDidCatch(error, info) {
  |
}

gsbu - getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
  |
}

ss - setState

this.setState({ | : | });

ssf - Functional setState

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

usf - Declare a new state variable using State Hook

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

Hit Tab to apply CamelCase to function. e.g. count, setCount

ren - render

render() {
  return (
    |
  );
}

rprop - Render Prop

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

export default |;

hoc - Higher Order Component

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 📄