request-animation-frame-hook

    1.1.1 • Public • Published

    useRequestAnimationFrame React Hook

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

    NPM JavaScript Style Guide

    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

    Install

    npm i request-animation-frame-hook

    DownloadsWeekly Downloads

    34

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • ja-klaudiusz