Element Resize Observer Hook For React

Gautam-Arora24 First listed on September 2, 2021

Description:

A React hook that tracks changes to the dimensions of an element using the ResizeObserver API.

1. Install and import the React hook.

# NPM
$ npm i resize-observer-hook --save

import useResizeObserver from 'resize-observer-hook'

2. Basic usage.

const App = () => {
  const [ref, width, height] = useResizeObserver()
  return (
    <div ref={ref}>
      {width} X {height}
    </div>
  )
}