npm i @react-hook/resize-observer
A React hook that fires a callback whenever ResizeObserver detects a change to its size.
- Uses a single
ResizeObserver
for tracking all elements used by the hooks. This approach is astoundingly more performant than using aResizeObserver
per element which most hook implementations do. - Uses
@juggle/resize-observer
as a ponyfill whenResizeObserver
isn't supported by the current browser. - Automatically unobserves the target element when the hook unmounts.
- You don't have to wrap your callback in
useCallback()
because any mutations are handled by the hook.
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>
)
}
function useResizeObserver<T extends HTMLElement>(
target: React.RefObject<T> | T | null,
callback: UseResizeObserverCallback
): 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 |
export type UseResizeObserverCallback = (
entry: ResizeObserverEntry,
observer: ResizeObserver
) => any
MIT