Skip to content

Frame timer hook based on requestAnimationFrame. You can start, stop and pause loop. For animation purposes.

License

Notifications You must be signed in to change notification settings

ja-klaudiusz/frame-timer-hook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Warning

Package no longer supported. Instead use useRequestAnimationFrame React Hook

Frame Timer React Hook

Timer hook with start, stop and pause behaviors as well as minFPS and stopInfo arguments. For animation purposes.

NPM JavaScript Style Guide

Install

npm install --save frame-timer-hook

API

const cb = (data) => {
  const { time, fps, counter, setStart, setStop } = data;
  const { ms, s, m, h, d } = time;
};
const stopValue = 2250;
const stopAfterTime = true;
const clearTimerDelay = 1000;
const stopInfo = [stopValue, stopAfterTime, clearTimerDelay];
const [start, pause, setStart, setStop] = useFrameTimer(cb, minFps, stopInfo);
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
minFps number minimum frames per second
stopInfo array stop info array
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 = true timer will stop after miliseconds defined in stopValue. if stopAfterTime = false timer will stop after refresh counts (returned in counter variable) defined in stopValue
clearTimerDelay number delay in milliseconds after which timer will reset

Usage

import React, { useState } from "react";

import { useFrameTimer } from "frame-timer-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 [start, pause, setStart, setStop] = useFrameTimer(
    (data) => {
      setTimer(data.time);
      setFps(data.fps);
      setCounter(data.counter);
    },
    60,
    [2150, false, 2500]
  );

  return (
    <div className="App">
      <h1>Frame timer hook</h1>
      <p>
        Frame timer hook with <strong>start</strong>, <strong>stop</strong> and{" "}
        <strong>pause</strong> behaviors
        <br />
        as well as <strong>minFPS</strong> and <strong>stopTime</strong>{" "}
        arguments
      </p>

      <div className="container">
        <h3 className="time">
          {Math.floor(timer.ms)} ms <span className="frames"> | {fps} fps</span>
        </h3>
        <h4 className="timer">
          {timer.d}:{String(timer.h % 24).padStart(2, "0")}:
          {String(timer.m % 60).padStart(2, "0")}:
          {String(timer.s % 60).padStart(2, "0")}:
          {String(timer.ms % 1000).padStart(3, "0")} ms
        </h4>
        <h4 className="refreshing">Refreshing: {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 Frame Timer React Hook

License

MIT © ja-klaudiusz

About

Frame timer hook based on requestAnimationFrame. You can start, stop and pause loop. For animation purposes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published