An easy to use React hook wrapper around the ResizeObserver API.
npm install @asyarb/use-resize-observer- Features
- Installation
- Usage
- Provide a ref from useRef
- Provide a DOM element
- API
- License

!npm bundle size
React implementation of the
Resize Observer Interface
to tell you when an element resizes.
Demo: Code Sandbox
- Hooks - Just pass a ref!
- Alternative API - Pass an Element and an optional function to handle
ResizeObserver callbacks.
- Typed - Written with TypeScript!
> ⚠️ This package includes
> resize-observer-polyfill
> for full browser support. This package ponyfills ResizeObserver at runtime
> based on the browser.
Run the following:
``bashYarn
yarn add @asyarb/use-resize-observer
Usage
$3
To observe the resizing of a component, pass a
ref for a component to
useResizeObserver:`jsx
const Example = () => {
const ref = useRef()
const [height, setHeight] = useState(0) // Get the content rect directly from the hook:
const sizes = useResizeObserver({ ref })
// Perform any side effect with those sizes!
useEffect(() => void setHeight(sizes.height), [sizes])
return
Some content...
}
`sizes will be updated whenever the observed element is resized.Alternatively, you can pass a function as the second parameter to perform any
side effect on resize. This function receives the
ResizeObserver entry
(ResizeObserverEntry) object as an argument.`jsx
const Example = () => {
const ref = useRef
const [height, setHeight] = useState(0) // Provide an optional callback to perform side effects instead:
useResizeObserver({
ref,
callback: entry => setHeight(entry.contentRect.height),
})
return
Some content...
}
`$3
useResizeObserver can alternatively take an HTMLElement such as the return
value from document.querySelector().`jsx
const element = document.querySelector('.someClass')const Example = () => {
const [height, setHeight] = useState(0)
// Pass an HTMLElement directly:
const sizes = useResizeObserver({ element })
// Perform any side effect with that element's sizes!
useEffect(() => void setHeight(sizes.height), [sizes])
return
Some content...
}
`Just like the previous example, you can also provide a callback function.
API
| Argument | Required | Description |
| ---------- | :------: | --------------------------------------------------------------------------------------------------------------- |
|
ref | NP | React ref to observe. |
| element | No | HTML Element to observe. If both ref and element are provided, ref is prioritized. |
| callback | No | Optional callback to fire on resize. Receives the ResizeObserverEntry` for the observed element as an argument |MIT.