useMeasure Hooks

useInitialMeasure.tsx

import React from 'react'

export interface Size {
  width: number
  height: number
}

export function useInitialMeasure(ref: React.RefObject<HTMLElement | null>) {
  const [bounds, setBounds] = React.useState<Size>({
    width: 0,
    height: 0,
  })

  React.useEffect(() => {
    if (ref.current)
      setBounds({
        width: ref.current.clientWidth,
        height: ref.current.clientHeight,
      })
  }, [ref])

  return bounds
}

useMeasure.tsx

import React from 'react'
import ResizeObserver from 'resize-observer-polyfill'

export interface Bounds {
  left: number
  height: number
  top: number
  width: number
}

export function useMeasure(ref: React.RefObject<HTMLElement | null>) {
  const [bounds, setBounds] = React.useState<Bounds>({
    left: 0,
    top: 0,
    width: 0,
    height: 0,
  })

  const [observer] = React.useState(
    () =>
      new ResizeObserver(([entry]) => {
        setBounds(entry.contentRect)
      })
  )

  React.useEffect(() => {
    if (ref.current) observer.observe(ref.current)
    return () => observer.disconnect()
  }, [observer, ref])

  return bounds
}