Package Exports

request-animation-frame-hook
request-animation-frame-hook/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (request-animation-frame-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

request-animation-frame-hook