[!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.
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