# use-resize-observer

#

A React hook that allows you to use a ResizeObserver to measure an element's size. [![npm version](https://badge.fury.io/js/use-resize-observer.svg)](https://npmjs.com/package/use-resize-observer) [![build](https://github.com/ZeeCoder/use-resize-observer/workflows/Testing/badge.svg)](https://github.com/ZeeCoder/use-resize-observer/actions/workflows/testing.yml) [![BrowserStack Status](https://automate.browserstack.com/badge.svg?badge_key=aVpjV2RZbThnWnh2S0FvREh0cGRtRHRCNzYwUmw4N0Z4WUxybHM0WkpqST0tLW9RT0tDeGk3OVU2WkNtalpON29xWFE9PQ==--ec6a97c52cd7ad30417612ca3f5df511eef5d631)](https://automate.browserstack.com/public-build/aVpjV2RZbThnWnh2S0FvREh0cGRtRHRCNzYwUmw4N0Z4WUxybHM0WkpqST0tLW9RT0tDeGk3OVU2WkNtalpON29xWFE9PQ==--ec6a97c52cd7ad30417612ca3f5df511eef5d631) ## Highlights - Written in **TypeScript**. - **Tiny**: [648B](.size-limit.json) (minified, gzipped) Monitored by [size-limit](https://github.com/ai/size-limit). - Exposes an **onResize callback** if you need more control. - `box` [option](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#syntax). - Works with **SSR**. - Works with **CSS-in-JS**. - **Supports custom refs** in case you [had one already](#passing-in-your-own-ref). - **Uses RefCallback by default** To address delayed mounts and changing ref elements. - **Ships a polyfilled version** - Handles many edge cases you might not even think of. (See this documentation and the test cases.) - Easy to compose ([Throttle / Debounce](#throttle--debounce), [Breakpoints](#breakpoints)) - **Tested in real browsers** (Currently latest Chrome, Firefox, Edge, Safari, Opera, IE 11, iOS and Android, sponsored by BrowserStack) ## In Action [CodeSandbox Demo](https://codesandbox.io/s/nrp0w2r5z0) ## Install ```sh yarn add use-resize-observer --dev # or npm install use-resize-observer --save-dev ``` ## Options | Option | Type | Description | Default | | -------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | -------------- | | ref | undefined | RefObject | HTMLElement | A ref or element to observe. | undefined | | box | undefined | "border-box" | "content-box" | "device-pixel-content-box" | The [box model](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#syntax) to use for observation. | "content-box" | | onResize | undefined | ({ width?: number, height?: number }) => void | A callback receiving the element size. If given, then the hook will not return the size, and instead will call this callback. | undefined | | round | undefined | (n: number) => number | A function to use for rounding values instead of the default. | `Math.round()` | ## Response | Name | Type | Description | | ------ | ----------------------- | ---------------------------------------------- | | ref | RefCallback | A callback to be passed to React's "ref" prop. | | width | undefined | number | The width (or "blockSize") of the element. | | height | undefined | number | The height (or "inlineSize") of the element. | ## Basic Usage Note that the default builds are not polyfilled! For instructions and alternatives, see the