useResizeObserver()

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] 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 | React.ForwardedRef | 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

$3

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

$3

`ts
export type UseResizeObserverOptions = {
polyfill?: any
}
`

#### polyfill

A ResizeObserver polyfill implementation such as @juggle/resize-observer (this was the default in V1.x).

`ts
import useResizeObserver from '@react-hook/resize-observer'
import {ResizeObserver} from '@juggle/resize-observer'

useResizeObserver(..., ..., { polyfill: ResizeObserver })
``

LICENSE

MIT