Resize observer hook for react

useResizeObserver.ts

import { useEffect, useRef, useState } from 'react'

export function useResizeObserver<E extends Element>() {
  const ref = useRef<E>(null)
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  useEffect(() => {
    if (!ref.current) {
      return () => {}
    }

    const observer = new ResizeObserver(([el]) => {
      const { width, height } = el.contentRect
      setWidth(width)
      setHeight(height)
    })

    observer.observe(ref.current)

    return () => {
      observer.disconnect()
    }
  }, [])

  return { ref, width, height }
}