Use auto height

1"use client";
2import * as React from "react";
3 
4export function useAutoHeight(
5	deps = [],
6	options = {
7		includeParentBox: true,
8		includeSelfBox: false,
9	},
10) {
11	const ref = React.useRef(null);
12	const roRef = React.useRef(null);
13	const [height, setHeight] = React.useState(0);
14 
15	const measure = React.useCallback(() => {
16		const el = ref.current;
17		if (!el) return 0;
18 
19		const base = el.getBoundingClientRect().height || 0;
20 
21		let extra = 0;
22 
23		if (options.includeParentBox && el.parentElement) {
24			const cs = getComputedStyle(el.parentElement);
25			const paddingY =
26				(parseFloat(cs.paddingTop || "0") || 0) +
27				(parseFloat(cs.paddingBottom || "0") || 0);
28			const borderY =
29				(parseFloat(cs.borderTopWidth || "0") || 0) +
30				(parseFloat(cs.borderBottomWidth || "0") || 0);
31			const isBorderBox = cs.boxSizing === "border-box";
32			if (isBorderBox) {
33				extra += paddingY + borderY;
34			}
35		}
36 
37		if (options.includeSelfBox) {
38			const cs = getComputedStyle(el);
39			const paddingY =
40				(parseFloat(cs.paddingTop || "0") || 0) +
41				(parseFloat(cs.paddingBottom || "0") || 0);
42			const borderY =
43				(parseFloat(cs.borderTopWidth || "0") || 0) +
44				(parseFloat(cs.borderBottomWidth || "0") || 0);
45			const isBorderBox = cs.boxSizing === "border-box";
46			if (isBorderBox) {
47				extra += paddingY + borderY;
48			}
49		}
50 
51		const dpr =
52			typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
53		const total = Math.ceil((base + extra) * dpr) / dpr;
54 
55		return total;
56	}, [options.includeParentBox, options.includeSelfBox]);
57 
58	React.useLayoutEffect(() => {
59		const el = ref.current;
60		if (!el) return;
61 
62		setHeight(measure());
63 
64		if (roRef.current) {
65			roRef.current.disconnect();
66			roRef.current = null;
67		}
68 
69		const ro = new ResizeObserver(() => {
70			const next = measure();
71			requestAnimationFrame(() => setHeight(next));
72		});
73 
74		ro.observe(el);
75		if (options.includeParentBox && el.parentElement) {
76			ro.observe(el.parentElement);
77		}
78 
79		roRef.current = ro;
80 
81		return () => {
82			ro.disconnect();
83			roRef.current = null;
84		};
85		// eslint-disable-next-line react-hooks/exhaustive-deps
86	}, deps);
87 
88	React.useLayoutEffect(() => {
89		if (height === 0) {
90			const next = measure();
91			if (next !== 0) setHeight(next);
92		}
93	}, [height, measure]);
94 
95	return {
96		ref,
97		height,
98	};
99}