fps-react v0.1.6

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

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

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

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/