"use client"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import * as ReactDOM from "react-dom"; import { cn } from "@/lib/utils"; const fpsVariants = cva( "z-50 flex shrink-0 items-center gap-2 rounded-sm border bg-background/80 px-3 py-1.5 font-mono text-foreground text-sm backdrop-blur-sm", { variants: { strategy: { fixed: "fixed", absolute: "absolute", }, position: { "top-left": "top-4 left-4", "top-right": "top-4 right-4", "bottom-left": "bottom-4 left-4", "bottom-right": "right-4 bottom-4", }, status: { good: "text-primary", warning: "text-orange-500", error: "text-destructive", }, }, defaultVariants: { strategy: "fixed", position: "top-right", status: "good", }, }, ); interface FpsProps extends React.ComponentProps<"div">, Omit, "status"> { label?: string; updateInterval?: number; warningThreshold?: number; errorThreshold?: number; portalContainer?: Element | DocumentFragment | null; enabled?: boolean; } function Fps(props: FpsProps) { const { strategy = "fixed", position = "top-right", label, updateInterval = 500, warningThreshold = 30, errorThreshold = 20, portalContainer: portalContainerProp, enabled = true, className, ...fpsProps } = props; const [mounted, setMounted] = React.useState(false); const [fps, setFps] = React.useState(0); const frameCountRef = React.useRef(0); const lastTimeRef = React.useRef(performance.now()); const animationFrameRef = React.useRef(null); const updateTimeoutRef = React.useRef | null>( null, ); React.useLayoutEffect(() => setMounted(true), []); const status = React.useMemo(() => { if (fps < errorThreshold) return "error"; if (fps < warningThreshold) return "warning"; return "good"; }, [fps, errorThreshold, warningThreshold]); React.useEffect(() => { if (!enabled || typeof window === "undefined") return; function measureFps() { const now = performance.now(); const delta = now - lastTimeRef.current; frameCountRef.current += 1; if (delta >= updateInterval) { const currentFps = Math.round((frameCountRef.current * 1000) / delta); setFps(currentFps); frameCountRef.current = 0; lastTimeRef.current = now; } animationFrameRef.current = requestAnimationFrame(measureFps); } animationFrameRef.current = requestAnimationFrame(measureFps); return () => { if (animationFrameRef.current !== null) { cancelAnimationFrame(animationFrameRef.current); } if (updateTimeoutRef.current !== null) { clearTimeout(updateTimeoutRef.current); } }; }, [enabled, updateInterval]); if (!enabled) return null; const portalContainer = strategy === "absolute" ? null : (portalContainerProp ?? (mounted ? globalThis.document?.body : null)); const Comp = ( ); return portalContainer ? ReactDOM.createPortal(Comp, portalContainer) : Comp; } export { Fps };

Fps

Instalação