@asyarb/use-resize-observer

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.