# @sethwebster/react-fps-counter

> This package provides a component to overlay of the number of FPS (frames per second) of your React page.

Latest version **0.0.19** (published 2023-01-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @sethwebster/react-fps-counter
pnpm add @sethwebster/react-fps-counter
yarn add @sethwebster/react-fps-counter
bun add @sethwebster/react-fps-counter
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2023-01-13 |
| First published | 2023-01-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | sethwebster |
| Keywords | react, fps, counter, performance, react-fps-counter |

## Links

- npm: https://www.npmjs.com/package/@sethwebster/react-fps-counter
- Repository: https://github.com/sethwebster/react-fps-counter
- Issues: https://github.com/sethwebster/react-fps-counter/issues
- npm.io page: https://npm.io/package/@sethwebster/react-fps-counter

## Dependencies (2)

- [async-mutex](https://npm.io/package/async-mutex.md) ^0.4.0
- [double-ended-queue](https://npm.io/package/double-ended-queue.md) ^2.1.0-0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.19 (latest) — 2023-01-13
- 0.0.18 — 2023-01-13
- 0.0.17 — 2023-01-13
- 0.0.16 — 2023-01-12
- 0.0.15 — 2023-01-11
- 0.0.14 — 2023-01-11
- 0.0.13 — 2023-01-11
- 0.0.12 — 2023-01-08
- 0.0.11 — 2023-01-08
- 0.0.10 — 2023-01-08
- 0.0.9 — 2023-01-08
- 0.0.8 — 2023-01-07
- 0.0.7 — 2023-01-07
- 0.0.6 — 2023-01-07
- 0.0.5 — 2023-01-07
- … 6 more at https://npm.io/package/@sethwebster/react-fps-counter/versions

## README

# React Fps Counter
This package provides a component to overlay of the number of FPS (frames per second) of your React page.

![What the FPS Display Looks Like](https://raw.githubusercontent.com/sethwebster/react-fps-counter/main/images/screenshot.png)

You can see the current FPS, and the average FPS over a number of frames.

[Code Sandbox](https://codesandbox.io/s/admiring-haslett-hluduf) | [Demo](https://hluduf.csb.app/)

## Basic Usage
If you want to measure FPS across your entire React App, it's best to place the `FPSCounter` component at the root of your app. Otherwise, if you only want to measure a specific component or page, place the component there.

```jsx
import { useState } from 'react';
import FPSCounter from '@sethwebster/react-fps-counter';

function App() {
  const [fpsVisible, setFpsVisible] = useState(true)
  return (
    <div>
    ...
    <FPSCounter visible={fpsVisible}/>
    ...
    </div>
  )
}
```

### Options
<table>
<tr>
  <th>Option</th>
  <th>Default</th>
  <th>Notes</th>
</tr>
<tr>
  <td>visible</td>
  <td>false</td>
  <td>Controls the visibility of the component</td>
</tr>
<tr>
  <td>targetFrameRate</td>
  <td>60</td>
  <td>Specifies the desired number of frames per second. Used to calculate the graph.</td>
</tr>
<tr>
  <td>position</td>
  <td>
  
  `top-left`
  
  </td>
  <td>
  
  Controls the position of the component. Possible values are: `top-left`, `top-right`, `bottom-left`, `bottom-right`
  
  </td>
</tr>
<tr>
  <td>samplePeriod</td>
  <td>1000</td>
  <td>Specifies how long each sample period should be in milliseconds. Smaller numbers sample more often. Every frame is captured, but when calculating the average, the <code>samplePeriod</code> is used.</td>
</tr>
<tr>
  <td>numberOfFramesForAverage</td>
  <td>5</td>
  <td>The number of frames to sample for an average.</td>
</tr>
<tr>
  <td>colorTiers</td>
  <td>
  
  ```js 
  {   
    0.1: "red",  
    0.35: "orange",  
    0.5: "yellow",  
    0.75: "green" 
  }
  ```
  </td>
  <td>
  
  The colors to use in the graph, and the appropriate threshold for each color. Thresholds are specified in percentage of the specified `targetFrameRate`.
  
  </td>
</tr>
<tr>
  <td>useAnimationFrames</td>
  <td>true</td>
  <td>Specifies whether to use <code>window.requestAnimationFrame</code> or not. It is highly recommended, for accuracy's sake, to leave this <code>true</code>.</td>
</tr>

</table>

## Advanced Usage

```jsx
import { useState } from 'react';
import FPSCounter from '@sethwebster/react-fps-counter';

function App() {
  const [fpsVisible, setFpsVisible] = useState(true)
  return (
    <div>
    ...
    <FPSCounter 
      visible={fpsVisible} 
      {/* sample every 100ms */}
      samplePeriod={100} 
      {/* average every 100 frames */}
      numberOfFramesForAverage={100} 
      {/* specify a more restrictive set of thresholds */}
      colorTiers={{
        0.3: "red",
        0.4: "orange",
        0.6: "yellow",
        0.9: "green",
      }}
    />
    ...
    </div>
  )
}
```

## Using Frame Data 
It is possible to use the frame data yourself without the overlay, if you desire.

```jsx
...
import { useFps } from '@sethwebster/react-fps-counter';
...

function Component() {
  const fpsData = useFps(/* {samplePeriod: number, numberOfFramesForAverage: number } */);

  return <div>
    <span>fps: {fps.fps}</span>
    {" "} 
    <span>avg: {fps.avg}</span>
  </div>
}
```

![Demo of useFpsData](https://raw.githubusercontent.com/sethwebster/react-fps-counter/main/images/useFpsScreenshot.png)
### License
[MIT](./LICENSE.txt)

---
_Source: https://npm.io/package/@sethwebster/react-fps-counter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._