FLUXLAY

システムモニタの表示

useSystemMonitor() を使って、CPU 使用率、メモリ使用率、ネットワーク帯域、バッテリー状態などのシステム情報をリアルタイムに取得します。

基本的な使い方

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>
  );
}

CPU コアごとの使用率

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>
  );
}

ポーリング間隔のチューニング

カテゴリごとに異なる間隔を指定できます。よく動く CPU は短く、ほぼ動かないディスク容量は長くするとバッテリーに優しい構成になります。

const info = useSystemMonitor({
  cpuIntervalMs: 500, // 0.5 秒（高頻度）
  memoryIntervalMs: 1000, // 1 秒
  diskSpaceIntervalMs: 60000, // 1 分（低頻度）
  batteryIntervalMs: 30000 // 30 秒
});

バッテリー状態

ノート PC のバッテリー残量と充電状態を取得できます。

function Battery() {
  const { batteryLevel, batteryCharging } = useSystemMonitor();
 
  if (batteryLevel === null) {
    return null; // デスクトップ機ではバッテリー情報なし
  }
 
  return (
    <div>
      {batteryCharging ? "⚡" : "🔋"} {batteryLevel.toFixed(0)}%
    </div>
  );
}

注意事項

  • 全ての値は最初のサンプルが届くまで 0 または null を返します。
  • ポーリング間隔を短くしすぎるとバッテリー消費と CPU 負荷が増えます。
  • CPU 使用率・メモリ使用率・バッテリー残量は 0.0 – 100.0 のパーセント値です。ディスク I/O・ネットワークは「秒間バイト数」で返されます。

詳細は useSystemMonitor リファレンスを参照してください。