useAutoHeight

1"use client";
2 
3import * as React from "react";
4 
5interface 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 rafRef = React.useRef<number | null>(null);
20  const [height, setHeight] = React.useState(0);
21 
22  const scheduleHeight = React.useCallback((next: number) => {
23    if (rafRef.current !== null) {
24      cancelAnimationFrame(rafRef.current);
25    }
26    rafRef.current = requestAnimationFrame(() => {
27      rafRef.current = null;
28      setHeight(next);
29    });
30  }, []);
31 
32  const measure = React.useCallback(() => {
33    const el = ref.current;
34    if (!el) {
35      return 0;
36    }
37 
38    const base = el.getBoundingClientRect().height || 0;
39 
40    let extra = 0;
41 
42    if (options.includeParentBox && el.parentElement) {
43      const cs = getComputedStyle(el.parentElement);
44      const paddingY =
45        (Number.parseFloat(cs.paddingTop || "0") || 0) +
46        (Number.parseFloat(cs.paddingBottom || "0") || 0);
47      const borderY =
48        (Number.parseFloat(cs.borderTopWidth || "0") || 0) +
49        (Number.parseFloat(cs.borderBottomWidth || "0") || 0);
50      const isBorderBox = cs.boxSizing === "border-box";
51      if (isBorderBox) {
52        extra += paddingY + borderY;
53      }
54    }
55 
56    if (options.includeSelfBox) {
57      const cs = getComputedStyle(el);
58      const paddingY =
59        (Number.parseFloat(cs.paddingTop || "0") || 0) +
60        (Number.parseFloat(cs.paddingBottom || "0") || 0);
61      const borderY =
62        (Number.parseFloat(cs.borderTopWidth || "0") || 0) +
63        (Number.parseFloat(cs.borderBottomWidth || "0") || 0);
64      const isBorderBox = cs.boxSizing === "border-box";
65      if (isBorderBox) {
66        extra += paddingY + borderY;
67      }
68    }
69 
70    const dpr =
71      typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
72    const total = Math.ceil((base + extra) * dpr) / dpr;
73 
74    return total;
75  }, [options.includeParentBox, options.includeSelfBox]);
76 
77  React.useLayoutEffect(() => {
78    const el = ref.current;
79    if (!el) {
80      return;
81    }
82 
83    setHeight(measure());
84 
85    if (roRef.current) {
86      roRef.current.disconnect();
87      roRef.current = null;
88    }
89 
90// … truncated