[!WARNING] Package no longer supported. Instead use useRequestAnimationFrame React Hook
React hook with in loop frame counter. For animation purposes. You can start, stop and pause loop while counting.
npm install --save in-loop-counter
import React, { useState } from "react";
import { useInLoopCounter } from "in-loop-counter";
const Example = () => {
const [counter, setCounter] = useState(0);
const [start, setStart, setStop] = useInLoopCounter((data) => {
setCounter(data.counter);
});
return (
<div className="App">
<h1>In loop frame counter</h1>
<p>Hook with start-stop-pause behaviors</p>
<div className="container">
<h3 className="counter"> {counter}</h3>
<div className="buttons">
<button onClick={setStart}>{start ? "Start" : "Pause"}</button>
<button onClick={setStop} disabled={start}>
Stop
</button>
</div>
</div>
</div>
);
};
Try it on CodeSandbox inLoopCounter React Hook
MIT © ja-klaudiusz