useAutoHeight

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