with-timer-react-hoc v0.6.0

A High Order Component to create and clear a timer.

Table of Contents

1. Features
2. Usage
3. Install
4. What does this repo have
5. But why

Features

Add a setTimer and clearTimer functions and keeps the timer hidden from the component.

Usage

Example of a class component implementing the HOC. If you prefere an example using hooks take a look here

import React from 'react';
import withTimer from 'with-timer-react-hoc';

/**
 * Original code from Pedro Duarte
 * @see https://codesandbox.io/s/84ryn6kv7l
 * @see https://84ryn6kv7l.codesandbox.io/
 * @see https://twitter.com/peduarte/status/1089930801536532480?s=20
*/
class RandomEmoji extends React.Component {
  state = { emojis: {}, emoji: "" };

  componentDidMount() {
    fetch("https://api.github.com/emojis")
      .then(response => response.json())
      .then(data => this.setState({ emojis: data }));
  }

  componentDidUpdate() {
    // Here we set the timer
    this.props.setTimer(
      () => this.setState({ emoji: this.getRandomEmoji() }),
      1000
    );
  }

  componentWillUnmount() {
    // Here we clear the timer, this code can be used in a "stop" button implementation.
    this.props.clearTimer();
  }

  render() {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "100vh"
        }}
      >
        <img src={this.state.emoji} width="64px" />
      </div>
    );
  }

  getRandomEmoji = () => {
    const { emojis } = this.state;
    const names = Object.keys(emojis);
    return emojis[names[(names.length * Math.random()) << 0]];
  };
}

// Wrapping the component with the HOC
export default withTimer(RandomEmoji);

Install

NPM

npm i with-timer-react-hoc

Yarn

yarn add with-timer-react-hoc

What does this repo have

1. Continous integration with Travis and Coveralls.
2. Webpack and babel setup to share isolated components.
3. Jest configuration with code coverage.
4. An example of a High Order Component in React.
5. Asynchronous code using hooks, two cases API call and timer execution.
6. An example of a functional component using useState and useEffect hooks.
7. Descriptions of each part of the written code.

But why

A timer in a HOC

The HOCs are recommended by the react team to be used in the implementation of Cross-Cutting Concerns. The timer is not part of a visualization logic. This kind of logic always answer to "what needs to be to displayed?", but the timer answer to "when do display it?" like an user action.

The proyect setup

The setup and configuration will be the base for a template to create isolated components and small React apps with TDD and CI.