Function useResizeObserver

packages/react/src/hooks/useResizeObserver.ts:12–35

(callback: ResizeObserverCallback, target?: RefObject<T>)

}

export function useResizeObserver<T extends HTMLElement>(callback: ResizeObserverCallback, target?: RefObject<T>) {
  const savedCallback = useRef(callback)

  useLayoutEffect(() => {
    savedCallback.current = callback
  })

  useLayoutEffect(() => {
    const targetEl = target && 'current' in target ? target.current : document.documentElement
    if (!targetEl) {
      return
    }

    const observer = new ResizeObserver(entries => {
      savedCallback.current(entries)
    })

    observer.observe(targetEl)

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