npm i @react-hook/resize-observer

A React hook that fires a callback whenever ResizeObserver detects a change to its size.

Features

- [x] Uses a single ResizeObserver for tracking all elements used by the hooks.
This approach is astoundingly more performant
than using a ResizeObserver per element which most hook implementations do.
- [x] Uses @juggle/resize-observer as a ponyfill when ResizeObserver isn't supported
by the current browser.
- [x] Automatically unobserves the target element when the hook unmounts.
- [x] You don't have to wrap your callback in useCallback() because any mutations
are handled by the hook.

Quick Start

Check out an example on CodeSandbox

``jsx harmony
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 (


      {JSON.stringify({width: size.width, height: size.height}, null, 2)}
    

`ts
function useResizeObserver(
target: React.RefObject | T | null,
callback: UseResizeObserverCallback,
options?: ResizeObserverOptions
): 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? | [ResizeObserverOptions][1] | No | Provide options to ResizeObserver |

Types

$3

`ts
export type UseResizeObserverCallback = (
entry: ResizeObserverEntry,
observer: ResizeObserver
) => any
``

LICENSE

MIT

[1]: https://w3c.github.io/csswg-drafts/resize-observer/#resize-observer-interface