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.
npm i fps-react or yarn add fps-react Used for detecting low frame rate and maybe disable effect to improve preformace.
| 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 |
import { useFPSDetect } from 'fps-react' ... const lowFrameRate = useFPSDetect({ minimumFps: 20, }) useEffect(() => { if (lowFrameRate) { //disable effects } },[lowFrameRate])
Stats can be placed on page, the stats are rendered as a svg image
| 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 |
import React from "react"; import { render } from "react-dom"; import { FPSStats } from "fps-react"; const App = () => { return ( <div> <FPSStats /> </div> ); }; render(<App />, document.body);This is a hook for getting an array with FPS, the last element in the array contains the current frame rate.
| Parameter | Type | Description |
|---|---|---|
| fpsHistory | number | Number of FPS stored, default: 50 |
| fpsSampleRate | number | How offent the FPS is updated, default: 1000 |
import { useFPSCore } from 'fps-react' const { fps } = useFPSCore({ fpsHistory: 50, fpsSampleRate: 1000 })Inspired by https://github.com/sebslomski/react-stats, https://github.com/tibotiber/react-fps-stats and https://github.com/mrdoob/stats.js.
You can see the hook in action on my person page: https://vlx.dk/