Display System Stats

Use useSystemMonitor() to subscribe to real-time CPU usage, memory usage, network throughput, and battery state.

Basic usage

import { useSystemMonitor } from "@fluxlay/react";
 
function Monitor() {
  const { cpuUsage, memoryUsage } = useSystemMonitor();
 
  return (
    <div style={{ color: "white", padding: 24 }}>
      <div>CPU: {cpuUsage.toFixed(1)}%</div>
      <div>RAM: {memoryUsage.toFixed(1)}%</div>
    </div>
  );
}

Per-core CPU usage

function CpuPerCore() {
  const { cpuPerCore } = useSystemMonitor();
 
  return (
    <div style={{ display: "flex", gap: 4 }}>
      {cpuPerCore.map((usage, i) => (
        <div key={i} style={{ width: 8, height: 64, background: "#333", position: "relative" }}>
          <div
            style={{
              position: "absolute",
              bottom: 0,
              width: "100%",
              height: `${usage}%`,
              background: "#0f0"
            }}
          />
        </div>
      ))}
    </div>
  );
}

Tune polling intervals

Each category has its own polling interval. Sample fast-changing values frequently and slow-changing values rarely to save battery.

const info = useSystemMonitor({
  cpuIntervalMs: 500, // 0.5s (frequent)
  memoryIntervalMs: 1000, // 1s
  diskSpaceIntervalMs: 60000, // 1 minute (rare)
  batteryIntervalMs: 30000 // 30s
});

Battery state

Get battery level and charging state on laptops.

function Battery() {
  const { batteryLevel, batteryCharging } = useSystemMonitor();
 
  if (batteryLevel === null) {
    return null; // No battery on desktop machines
  }
 
  return (
    <div>
      {batteryCharging ? "⚡" : "🔋"} {batteryLevel.toFixed(0)}%
    </div>
  );
}

Notes

All values return 0 or null until the first sample arrives.
Aggressive polling intervals increase CPU and battery usage.
CPU usage, memory usage, and battery level are percentages in 0.0 – 100.0. Disk I/O and network are returned as bytes/sec.

See the useSystemMonitor Reference for full API details.