A High Order Component to create and clear a timer.
Add a setTimer and clearTimer functions and keeps the timer hidden from the component.
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);Kind of obvious, but you need to be working with React.
NPM
npm i with-timer-react-hoc
Yarn
yarn add with-timer-react-hoc
- Continous integration with Travis and Coveralls.
- Webpack and babel setup to share isolated components.
- Jest configuration with code coverage.
- An example of a High Order Component in React.
- Asynchronous code using hooks, two cases API call and timer execution.
- An example of a functional component using useState and useEffect hooks.
- Descriptions of each part of the written code.
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 setup and configuration will be the base for a template to create isolated components and small React apps with TDD and CI.
Inside the source and example files, you will see the next sections, here is a small explanation why.
Here we group the import statements or the require executions to all code which isn't written by us.
Same as the previous one but for our components.
Values which not change during the program execution, grouped in a section to be easly moved to a configuration file if need it.
Usually data validators, transformers and selectors which are used only in one file. These functions have no referens to component properties or methods. The relation with te component is only about the data structure.
Component declaration, here we do our magic with visualization logic.
These values are changed only by the component implementor, so they are like constants during the life cycle.
Here we have the variables and functions or properties and methods whichs allow us to work with data changes inside the component.
What makes a method private? The references of a father object or function inside. If you move a private method outside the class or function to which it belongs, you'll have a runtime error.
Writting components, the private methods are those which works with properties and state values. Every line of code you write in here ends with the change of the state or the execution of a high order component's method, and React will react changing the DOM acordly.
This sections contains the methods requiered by React to handle it life cyle by a class component or the hook implementation, usually the handlers for useEffect.
The useEffect hook require a function to handle the effect in the state and may return a function which works as effect cleaner. The react team recommends to have one effect for each state value which require one. You'll see two subsections here effect and effect cleaner for educational purpuses.
The return statement from a functional component or the render method from a class component contains the JSX which represents the DOM nodes. Here you write node hierarchy, attach user action, event handlers and the interaction whith the browser through React.
When we work with component testing we need to be able to export different instances of it, basically to avoid testing render related process like api connections, or even this withTimer HOC. These process should be tested but not from a component test.
Complementary with the last section, we need to export the instances, by default we export the full ensambled component whith all it powers, redux connection, timer, etc. In another export statement we can export the instances we need in an object.