apps/web/src/hooks/use-resize-observer.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { useEffect } from "react";

export function useResizeObserver({
	ref,
	onResize,
}: {
	ref: React.RefObject<HTMLElement | null>;
	onResize: (entry: ResizeObserverEntry) => void;
}) {
	useEffect(() => {
		const element = ref.current;
		if (!element) return;

		const observer = new ResizeObserver((entries) => {
			for (const entry of entries) {
				onResize(entry);
			}
		});

		observer.observe(element);

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