npm i @react-hook/resize-observer
A React hook that fires a callback whenever ResizeObserver detects a change to its size.
Features
Quick Start
Check out an example on CodeSandbox
import * as React from 'react'
import useResizeObserver from '@react-hook/resize-observer'
const useSize = (target) => {
const [size, setSize] = React.useState()
React.useLayoutEffect(() => {
setSize(target.current.getBoundingClientRect())
}, [target])
// Where the magic happens
useResizeObserver(target, (entry) => setSize(entry.contentRect))
return size
}
const App = () => {
const target = React.useRef(null)
const size = useSize(target)
return (
<pre ref={target}>
{JSON.stringify({width: size.width, height: size.height}, null, 2)}
</pre>
)
}
API
useResizeObserver(target, callback, options)
function useResizeObserver<T extends Element>(
target: React.RefObject<T> | React.ForwardedRef<T> | T | null,
callback: UseResizeObserverCallback,
options?: UseResizeObserverOptions
): ResizeObserver
| Argument | Type | Required? | Description |
|---|
| target | React.RefObject | T | null | Yes | A React ref created by useRef() or an HTML element |
| callback | UseResizeObserverCallback | Yes | Invoked with a single ResizeObserverEntry any time the target resizes |
| options | UseResizeObserverOptions | No | Options for the ResizeObserver instance. |
Types
UseResizeObserverCallback
export type UseResizeObserverCallback = (
entry: ResizeObserverEntry,
observer: ResizeObserver
) => any
UseResizeObserverOptions
export type UseResizeObserverOptions = {
polyfill?: any
}
polyfill
A ResizeObserver polyfill implementation such as @juggle/resize-observer (this was the default in V1.x).
import useResizeObserver from '@react-hook/resize-observer'
import {ResizeObserver} from '@juggle/resize-observer'
useResizeObserver(..., ..., { polyfill: ResizeObserver })
LICENSE
MIT
