use-resize-observer

• Features
• Installation
• Usage
  • Provide a ref from useRef
  • Provide a DOM element
  • API
• License

React implementation of the Resize Observer Interface to tell you when an element resizes.

Demo: Code Sandbox

Features

• Hooks - Just pass a ref!
• Alternative API - Pass an Element and an optional function to handle ResizeObserver callbacks.
• Typed - Written with TypeScript!

⚠️ This package includes resize-observer-polyfill for full browser support. This package ponyfills ResizeObserver at runtime based on the browser.

Installation

Run the following:

# Yarn
yarn add @asyarb/use-resize-observer

# NPM
npm i @asyarb/use-resize-observer --save

Usage

Provide a ref from useRef

To observe the resizing of a component, pass a ref for a component to useResizeObserver:

const Example = () => {
  const ref = useRef()
  const [height, setHeight] = useState(0)

  // Get the content rect directly from the hook:
  const sizes = useResizeObserver({ ref })

  // Perform any side effect with those sizes!
  useEffect(() => void setHeight(sizes.height), [sizes])

  return <div ref={ref}>Some content...</div>
}

sizes will be updated whenever the observed element is resized.

Alternatively, you can pass a function as the second parameter to perform any side effect on resize. This function receives the ResizeObserver entry (ResizeObserverEntry) object as an argument.

const Example = () => {
  const ref = useRef
  const [height, setHeight] = useState(0)

  // Provide an optional callback to perform side effects instead:
  useResizeObserver({
    ref,
    callback: entry => setHeight(entry.contentRect.height),
  })

  return <div ref={ref}>Some content...</div>
}

Provide a DOM element

useResizeObserver can alternatively take an HTMLElement such as the return value from document.querySelector().

const element = document.querySelector('.someClass')

const Example = () => {
  const [height, setHeight] = useState(0)

  // Pass an HTMLElement directly:
  const sizes = useResizeObserver({ element })

  // Perform any side effect with that element's sizes!
  useEffect(() => void setHeight(sizes.height), [sizes])

  return <div ref={ref}>Some content...</div>
}

Just like the previous example, you can also provide a callback function.

API

| Argument | Required | Description | | ---------- | :------: | --------------------------------------------------------------------------------------------------------------- | | ref | NP | React ref to observe. | | element | No | HTML Element to observe. If both ref and element are provided, ref is prioritized. | | callback | No | Optional callback to fire on resize. Receives the ResizeObserverEntry for the observed element as an argument |

License

MIT.