Warning

Package no longer supported. Instead use useRequestAnimationFrame React Hook

useInLoopCounter React Hook

React hook with in loop frame counter. For animation purposes. You can start, stop and pause loop while counting.

Install

npm install --save in-loop-counter

Usage

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>
  );
};

Demo

Try it on CodeSandbox inLoopCounter React Hook

License

MIT © ja-klaudiusz