# frame-timer-hook

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

Latest version **1.2.3** (published 2022-03-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install frame-timer-hook
pnpm add frame-timer-hook
yarn add frame-timer-hook
bun add frame-timer-hook
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2022-03-13 |
| First published | 2022-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | ja-klaudiusz |
| Maintainers | ja-klaudiusz |

## Links

- npm: https://www.npmjs.com/package/frame-timer-hook
- Repository: https://github.com/ja-klaudiusz/frame-timer-hook
- Homepage: https://github.com/ja-klaudiusz/frame-timer-hook#readme
- Issues: https://github.com/ja-klaudiusz/frame-timer-hook/issues
- npm.io page: https://npm.io/package/frame-timer-hook

## Recent versions

- 1.2.3 (latest) — 2022-03-13
- 1.2.2 — 2022-03-07
- 1.2.1 — 2022-03-06
- 1.2.0 — 2022-03-04
- 1.1.0 — 2022-03-02
- 1.0.4 — 2022-02-21
- 1.0.3 — 2022-02-21
- 1.0.2 — 2022-02-21
- 1.0.1 — 2022-02-21
- 1.0.0 — 2022-02-21

## README

> [!WARNING]
> Package no longer supported. Instead use [useRequestAnimationFrame React Hook](https://www.npmjs.com/package/request-animation-frame-hook)

# Frame Timer React Hook

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

[![NPM](https://img.shields.io/npm/v/frame-timer-hook.svg)](https://www.npmjs.com/package/frame-timer-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save frame-timer-hook
```

## API

```jsx
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

```jsx
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](https://codesandbox.io/s/frame-timer-hook-v-1-2-0-forked-x27wmc?file=/src/App.js)

## License

MIT © [ja-klaudiusz](https://github.com/ja-klaudiusz)

---
_Source: https://npm.io/package/frame-timer-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._