FPS React

FPS React is a small package with some usefull hooks to detect low frame rate, showing FPS stats or just get the raw FPS data.

Install

npm i fps-react

or

yarn add fps-react

useFPSDetect

Used for detecting low frame rate and maybe disable effect to improve preformace.

Parameters

| Parameter | Type | Description | |---------------|----------|--------------------------------------------------------------------| | minimumFps | number | Minimum FPS that will trigger the value to be set to 'false' | | fpsHistory | number | Number of FPS stored used to calc an avarage FPS, default: 2 | | fpsSampleRate | number | How offent the FPS is updated, default: 1000 |

Usage

import { useFPSDetect } from 'fps-react'
...
const lowFrameRate = useFPSDetect({ minimumFps: 20,  })
useEffect(() => {
  if (lowFrameRate) {
    //disable effects
  }
},[lowFrameRate])

FPSStats

Stats can be placed on page, the stats are rendered as a svg image

Parameters

| Parameter | Type | Description | |---------------|----------------|--------------------------------------------------------------------| | top | string, number | CSS variable top, default: 2 | | bottom | string, number | CSS variable top, default: 'auto' | | right | string, number | CSS variable top, default: 'auto | | left | string, number | CSS variable top, default: 2 | | fpsSampleRate | number | How offent the FPS is updated, default: 1000 |

Usage

import React from "react";
import { render } from "react-dom";
import { FPSStats } from "fps-react";

const App = () => {
  return (
    <div>
      <FPSStats />
    </div>
  );
};

render(<App />, document.body);

useFPSCore

This is a hook for getting an array with FPS, the last element in the array contains the current frame rate.

Parameters

| Parameter | Type | Description | |---------------|----------|--------------------------------------------------------------------| | fpsHistory | number | Number of FPS stored, default: 50 | | fpsSampleRate | number | How offent the FPS is updated, default: 1000 |

Usage

import { useFPSCore } from 'fps-react'
const { fps } = useFPSCore({ fpsHistory: 50, fpsSampleRate: 1000 })

Credits

Inspired by https://github.com/sebslomski/react-stats, https://github.com/tibotiber/react-fps-stats and https://github.com/mrdoob/stats.js.

Demo

You can see the hook in action on my person page: https://vlx.dk/