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

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

API

useResizeObserver(target, callback, options)

function useResizeObserver<T extends Element>(
  target: React.RefObject<T> | React.ForwardedRef<T> | 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

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