System Resource Monitor

A reusable, customizable React component to monitor system resources like CPU, Memory, and custom metrics.
Supports both simulated data (for demo) and real API integrations.

✨ Features

• Real-time metrics with adjustable refresh interval
• Light/Dark theme toggle
• API integration (custom endpoints & headers)
• Simulated demo mode
• Responsive card layout
• TypeScript types included

📦 Installation

npm install system-resource-monitor

🚀 Quick Start

import { SystemResourceMonitor } from "system-resource-monitor";

export default function App() {
  return (
    <SystemResourceMonitor
      refreshInterval={5000}
      enableSimulation={true}
    />
  );
}

⚙️ Props
Prop	Type	Default	Description
refreshInterval	number	5000	Update interval in ms
enableSimulation	boolean	true	Enable random simulated data
apiEndpoint	string	—	API endpoint for real data
apiHeaders	Record<string,string>	{}	Headers for API requests
dataTransformer	(data:any)=>Metric[]	—	Transform API response to metrics
metrics	Metric[]	[]	Optional static/custom metrics
Metric type

interface Metric {
  label: string;
  value: number;
  unit: string;
}

🌓 Theme & Size

<SystemResourceMonitor theme="dark" size="md" />
<SystemResourceMonitor theme="light" size="lg" />

🔌 Using an API (example)

<SystemResourceMonitor
  apiEndpoint="/api/metrics"
  apiHeaders={{ Authorization: "Bearer token" }}
  dataTransformer={(res) => [
    { label: "CPU", value: res.cpu, unit: "%" },
    { label: "Memory", value: res.mem, unit: "%" },
  ]}
/>

🧪 Local Development (linking)

    In the library folder:

sudo npm link
npm run dev   # watch build with tsup

In your test app:

    npm link system-resource-monitor
    npm run dev

📜 License

This project is licensed under the MIT License.
You are free to use, modify, and distribute it with proper attribution.
MIT License © 2025 Joel Daniel Pradeep