![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A powerful React hook for observing element size changes using the Resize Observer API\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-resize-observer.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-resize-observer.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-resize-observer?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-resize-observer.svg?style=flat-square&color=007acc\")
\n \n
\n Installation ā¢\n Quick Start ā¢\n API Reference ā¢\n Examples ā¢\n License\n
\n\n\n \n š View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-resize-observer` is a feature-rich React hook for efficiently detecting element size changes using the Resize Observer API. It provides a simple API for responsive layouts, dynamic UI adjustments, canvas rendering, and more.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** ā a collection of production-ready React hooks designed for modern applications.\n\n### Why use-resize-observer?\n\n- **Zero Dependencies** ā Pure React implementation with no external dependencies\n- **TypeScript First** ā Full type safety with comprehensive type definitions\n- **Efficient Detection** ā Leverages native Resize Observer API for optimal performance\n- **Box Model Support** ā Observe content-box, border-box, or device-pixel-content-box\n- **Debounce & Throttle** ā Built-in rate limiting for high-frequency resize events\n- **Custom Rounding** ā Configure how size values are rounded (Math.round, Math.floor, Math.ceil)\n- **Callback Mode** ā Skip state updates and handle resizes directly in callbacks\n- **Manual Control** ā Programmatically observe/unobserve/disconnect\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Initial Dimensions** ā Support for SSR with initial width/height values\n- **Dynamic Enable/Disable** ā Conditional observation support\n- **Optimized Re-renders** ā Only updates when meaningful values change\n- **Well Tested** ā Comprehensive test coverage with Vitest\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-resize-observer\n\n# yarn\nyarn add @usefy/use-resize-observer\n\n# pnpm\npnpm add @usefy/use-resize-observer\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useResizeObserver } from \"@usefy/use-resize-observer\";\n\nfunction MyComponent() {\n const { ref, width, height } = useResizeObserver();\n\n return (\nWidth: {width}px
\nHeight: {height}px
\nContent Box: {contentBox.width} x {contentBox.height}
\nBorder Box: {borderBox.width} x {borderBox.height}
\nDebounced: {width} x {height}
\nUpdates 200ms after you stop resizing
\nThrottled: {width} x {height}
\nUpdates at most every 100ms
\nResize count: {resizeCount}
\nHandled via callback only
\nMath.round: {rounded.width} x {rounded.height}
\nMath.floor: {floored.width} x {floored.height}
\nMath.ceil: {ceiled.width} x {ceiled.height}
\nNo rounding: {noRound.width} x {noRound.height}
\nStatus: {enabled ? \"Observing\" : \"Paused\"}
\nSize: {width} x {height}
\nSize: {width} x {height}
\nAPI Supported: {isSupported ? \"Yes\" : \"No\"}
\n\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}