![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n React component for real-time browser memory monitoring\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/memory-monitor.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/memory-monitor.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/memory-monitor?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/memory-monitor.svg?style=flat-square&color=007acc\")
\n \n
\n Installation •\n Quick Start •\n Features •\n API Reference •\n Examples •\n Browser Support •\n License\n
\n\n\n \n 📚 View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/memory-monitor` is a React component for real-time browser memory monitoring with a slide-in panel UI. It provides memory visualization, leak detection, automatic GC triggers, snapshot management, and HTML report generation.\n\n**Includes `useMemoryMonitorHeadless` hook** for programmatic memory monitoring without UI — perfect for production environments where you only need data and callbacks.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem.**\n\n### Why memory-monitor?\n\n- **Real-time Memory Visualization** — Live gauges, charts, and heap breakdowns with configurable refresh intervals\n- **Advanced Leak Detection** — Multi-factor algorithm using linear regression, GC analysis, and baseline tracking\n- **Auto-GC Trigger** — Automatically request garbage collection when thresholds are exceeded\n- **Snapshot System** — Manual and scheduled snapshots with comparison capabilities\n- **Professional Reports** — Generate comprehensive HTML diagnostic reports with charts and recommendations\n- **Settings Persistence** — All configurations saved to LocalStorage automatically\n- **TypeScript First** — Full type safety with comprehensive exported interfaces\n- **SSR Compatible** — Safe to use with Next.js, Remix, and other SSR frameworks\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/memory-monitor\n\n# yarn\nyarn add @usefy/memory-monitor\n\n# pnpm\npnpm add @usefy/memory-monitor\n```\n\n### Peer Dependencies\n\nThis package requires React 18+ and Recharts:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^18.0.0 || ^19.0.0\",\n \"recharts\": \"^2.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { MemoryMonitor } from \"@usefy/memory-monitor\";\n\nfunction App() {\n return (\n\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}