useResizeObserver()

npm i @react-hook/resize-observer

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

Features

<input checked="" disabled="" type="checkbox"> Uses a single ResizeObserver for tracking all elements used by the hooks.

[This approach is astoundingly more performant](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ)
than using a `ResizeObserver` per element which most hook implementations do.

<input checked="" disabled="" type="checkbox"> Uses @juggle/resize-observer as a ponyfill when ResizeObserver isn't supported
```
by the current browser.
```
<input checked="" disabled="" type="checkbox"> Automatically unobserves the target element when the hook unmounts.
<input checked="" disabled="" type="checkbox"> 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)}

) }


## API

### useResizeObserver(target, callback)

```ts
function useResizeObserver<T extends HTMLElement>(
  target: React.RefObject<T> | T | null,
  callback: UseResizeObserverCallback,
  options?: ResizeObserverOptions
): ResizeObserver

Argument	Type	Required?	Description
target	`React.RefObject<T> \| 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	No	Provide options to ResizeObserver

Types