R3F Monitor

An advanced, easy-to-use performance monitoring tool for @react-three/fiber applications.

Add the <PerfMonitor /> component anywhere in your R3F Canvas.

🚀 Installation

npm


npm install r3f-monitor

yarn


yarn add r3f-monitor

pnpm


pnpm add r3f-monitor

bun


bun install r3f-monitor

🛠 Basic Usage

App.tsx


import { Canvas } from "@react-three/fiber";
import { PerfMonitor } from "r3f-monitor";
 
export default function App() {
  return (
    <Canvas>
      <PerfMonitor />
    </Canvas>
  );
}

🧪 Example

Live example: 👉 https://codesandbox.io/p/sandbox/3sqpy4