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](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.

• [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)}
    

## API

### useResizeObserver(target, callback, options)

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

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