useElementHeight

1"use client";
2 
3import { useCallback, useRef, useState } from "react";
4 
5/**
6 * Tracks an element's rendered height so a container can animate between content
7 * heights — accordions, collapsibles, step flows, expanding cards, anything that
8 * grows or shrinks to fit its content.
9 *
10 * Why this exists: you still can't reliably CSS-transition `height: auto` across
11 * browsers (the native `interpolate-size` / `calc-size()` approach is promising
12 * but not yet universally supported). The portable pattern is "measure, then
13 * animate to a pixel value" — which is exactly what this hook gives you.
14 *
15 * @example
16 *   const [ref, height] = useElementHeight<HTMLDivElement>();
17 *   return (
18 *     <motion.div animate={{ height: height ?? "auto" }} className="overflow-hidden">
19 *       <div ref={ref}>{content}</div>
20 *     </motion.div>
21 *   );
22 *
23 * Notes for animators:
24 * - Uses a *callback ref*, so it re-measures correctly even when the measured
25 *   element is conditionally rendered or swapped out — the common case for
26 *   collapsibles. (A `useRef` + `useEffect([])` hook would silently miss that.)
27 * - Reads the *border-box* height (padding + border included), because that's the
28 *   box the parent actually has to grow to.
29 * - `threshold` ignores sub-pixel ResizeObserver noise that would otherwise
30 *   re-trigger the animation every frame and read as jitter.
31 */
32export function useElementHeight<T extends HTMLElement>(threshold = 0.5) {
33  const [height, setHeight] = useState<number | null>(null);
34  const observerRef = useRef<ResizeObserver | null>(null);
35 
36  const ref = useCallback(
37    (element: T | null) => {
38      // Tear down the previous observer whenever the element changes or unmounts.
39      observerRef.current?.disconnect();
40 
41      if (!element) return;
42 
43      const updateHeight = (nextHeight: number) => {
44        setHeight((currentHeight) => {
45          if (currentHeight === null) return nextHeight;
46 
47          return Math.abs(currentHeight - nextHeight) > threshold
48            ? nextHeight
49            : currentHeight;
50        });
51      };
52 
53      updateHeight(element.getBoundingClientRect().height);
54 
55      if (typeof ResizeObserver === "undefined") return;
56 
57      const observer = new ResizeObserver((entries) => {
58        const entry = entries[0];
59 
60        if (!entry) return;
61 
62        const borderBoxSize = Array.isArray(entry.borderBoxSize)
63          ? entry.borderBoxSize[0]
64          : entry.borderBoxSize;
65 
66        updateHeight(
67// … truncated