apps/web/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

import { useEffect, useState } from "react";

export default function useResizeObserver<T extends HTMLElement>(
	ref: React.RefObject<T | null>,
) {
	const [size, setSize] = useState({ width: 0, height: 0 });

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

		const observer = new ResizeObserver(([entry]) => {
			setSize({
				width: entry?.contentRect.width ?? 0,
				height: entry?.contentRect.height ?? 0,
			});
		});

		observer.observe(ref.current);
		return () => observer.disconnect();
	}, [ref]);

	return size;
}