JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 479167
  • Score
    100M100P100Q194888F
  • License MIT

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

Package Exports

  • @react-hook/resize-observer
  • @react-hook/resize-observer/package.json

Readme


useResizeObserver()

Bundlephobia Types NPM Version MIT License

npm i @react-hook/resize-observer

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

Features

  • Uses a single ResizeObserver for tracking all elements used by the hooks. This approach is astoundingly more performant than using an ResizeObserver per element, as most hook implementations do.
  • Uses [resize-observer-polyfill] as a ponyfill when ResizeObserver isnt' supported by the current browser.
  • Automatically unobserves the target element when the hook unmounts.
  • 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()

  if (!size && target) {
    setSize(target.getBoundingClientRect())
  }

  // Where the magic happens
  useResizeObserver(target, (entry) => setSize(entry.contentRect))

  return size
}

const App = () => {
  const [target, setTarget] = React.useState(null)
  const size = useSize(target)
  return (
    <pre ref={setTarget}>
      {JSON.stringify({width: size.width, height: size.height}, null, 2)}
    </pre>
  )
}

API

useResizeObserver(target, callback)

function useResizeObserver<T extends HTMLElement>(
  target: React.RefObject<T> | T | null,
  callback: UseResizeObserverCallback
): ResizeObserver
Argument Type Required? Description
target `React.RefObject T null`
callback UseResizeObserverCallback Yes Invoked with a single ResizeObserverEntry any time the target resizes

Types

UseResizeObserverCallback

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

LICENSE

MIT