useRequestAnimationFrame React Hook

useRequestAnimationFrame React Hook with start, stop, pause actions and Window.requestAnimationFrame() in the background.

Install

npm install --save request-animation-frame-hook

API

const cb = (data) => {
  const { time, fps, counter, setStop } = data;
  const { ms, s, m, h, d } = time;
};
const autoStopCb = () => {
  console.log("auto stop callback");
};
const stopValue = 2250;
const stopAfterTime = true;
const clearTimerDelay = 1000;
const params = {
  stopRules: [stopValue, stopAfterTime, clearTimerDelay],
  autoStopCb,
};
const [start, pause, setStart, setStop] = useRequestAnimationFrame(cb, params);

	type	Required	Description
cb	void	✓	callback function
time	object		time object
ms, s, m, h, d	number		time object values
counter	number		timer amount of refreshing
setStart	void		method starting or resuming timer loop
setStop	void		method stopping timer loop
start	boolean		current timer start state
pause	boolean		current timer pause state
params	object		stop params
stopValue	number		depends on stopAfterTime takes the value of time in milliseconds or number of refresh counts (returned in counter variable)
stopAfterTime	boolean		if stopAfterTime = false timer will stop after miliseconds defined in stopValue. if stopAfterTime = true timer will stop after refresh counts (returned in counter variable) defined in stopValue
clearTimerDelay	number		delay in milliseconds after which timer will reset
autoStopCb	void		callback after auto stop

Usage

import React, { useState } from "react";

import { useRequestAnimationFrame } from "request-animation-frame-hook";

const timeDefault = {
  ms: 0,
  s: 0,
  m: 0,
  h: 0,
  d: 0,
};

const Example = () => {
  const [timer, setTimer] = useState(timeDefault);
  const [fps, setFps] = useState(0);
  const [counter, setCounter] = useState(0);

  const autoStopCb = () => {
    console.log("auto stop callback");
  };

  const [start, pause, setStart, setStop] = useRequestAnimationFrame(
    (data) => {
      setTimer(data.time);
      setFps(data.fps);
      setCounter(data.counter);
    },
    { stopRules: [100, true, 2000], autoStopCb }
  );
  return (
    <div className="App">
      <h1>useRequestAnimationFrame React Hook</h1>
      <p>
        useRequestAnimationFrame React Hook with <strong>start</strong>,{" "}
        <strong>stop</strong> and <strong>pause</strong> actions
      </p>

      <div className="container">
        <h3 className="time">
          {timer.ms.toFixed(1)} ms <span className="frames"> | {fps} fps</span>
        </h3>
        <h4 className="timer">
          Time: {timer.d}:{String(timer.h % 24).padStart(2, "0")}:
          {String(timer.m % 60).padStart(2, "0")}:
          {String(timer.s % 60).padStart(2, "0")}:
          {String(Math.floor(timer.ms / 10) % 100).padStart(2, "0")}
        </h4>
        <h4 className="refreshing">Counter: {counter}</h4>

        <div className="buttons">
          <button onClick={setStart}>{start ? "Pause" : "Start"}</button>
          <button onClick={setStop} disabled={!pause && !start}>
            Stop
          </button>
        </div>
      </div>
    </div>
  );
};

Demo

Try it on CodeSandbox RequestAnimationFrame React Hook

License

MIT © ja-klaudiusz