Mirror of https://github.com/roostorg/osprey
github.com/roostorg/osprey
1import * as React from 'react';
2import { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';
3
4export default function useResizeObserver(
5 element: HTMLElement | null,
6 onUpdate?: (entry: ResizeObserverEntry) => void
7): DOMRect | null {
8 const [refRect, setRefRect] = React.useState<DOMRect | null>(null);
9
10 React.useLayoutEffect(() => {
11 if (element == null) return;
12
13 const resizeObserver = new ResizeObserver((entries) => {
14 const entry = entries[0];
15 setRefRect(entry.target.getBoundingClientRect());
16 onUpdate?.(entry);
17 });
18
19 resizeObserver.observe(element);
20
21 return () => resizeObserver.disconnect();
22 }, [onUpdate, element]);
23
24 return refRect;
25}