Skip to content

vLX42/fps-react

Repository files navigation

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

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/