useElementSizeMap

1"use client";
2 
3import { useCallback, useEffect, useRef, useState } from "react";
4 
5export type ElementSize = {
6  width: number;
7  height: number;
8};
9 
10/**
11 * Tracks the rendered size of multiple keyed elements with ResizeObserver.
12 *
13 * Use it when an animated shell, indicator, toolbar, or floating panel needs to
14 * move toward the measured width/height of whichever keyed element is active.
15 *
16 * @example
17 *   const { setMeasureRef, sizes } = useElementSizeMap<HTMLDivElement>();
18 *   const activeSize = sizes[activeId];
19 *
20 *   return (
21 *     <>
22 *       <div aria-hidden className="invisible absolute">
23 *         {items.map((item) => (
24 *           <div key={item.id} ref={setMeasureRef(item.id)}>
25 *             {item.content}
26 *           </div>
27 *         ))}
28 *       </div>
29 *       <motion.div animate={activeSize}>
30 *         {activeItem.content}
31 *       </motion.div>
32 *     </>
33 *   );
34 */
35export function useElementSizeMap<T extends HTMLElement>(threshold = 0.5) {
36  const [sizes, setSizes] = useState<Record<string, ElementSize>>({});
37  const observerRef = useRef<ResizeObserver | null>(null);
38  const elements = useRef(new Map<string, T>());
39  const idsByElement = useRef(new WeakMap<Element, string>());
40  const callbacks = useRef(new Map<string, (node: T | null) => void>());
41  const thresholdRef = useRef(threshold);
42 
43  useEffect(() => {
44    thresholdRef.current = threshold;
45  }, [threshold]);
46 
47  useEffect(() => {
48    const activeElements = elements.current;
49 
50    return () => {
51      observerRef.current?.disconnect();
52      observerRef.current = null;
53      activeElements.clear();
54      idsByElement.current = new WeakMap();
55    };
56  }, []);
57 
58  const updateSizes = useCallback(
59    (updates: ReadonlyArray<readonly [string, ElementSize]>) => {
60      setSizes((current) => {
61        let next = current;
62 
63        for (const [id, nextSize] of updates) {
64          const currentSize = current[id];
65 
66          if (
67            currentSize &&
68            Math.abs(currentSize.width - nextSize.width) <=
69              thresholdRef.current &&
70            Math.abs(currentSize.height - nextSize.height) <=
71              thresholdRef.current
72          ) {
73            continue;
74          }
75 
76          if (next === current) {
77            next = { ...current };
78          }
79 
80          next[id] = nextSize;
81        }
82 
83        return next;
84      });
85    },
86    [],
87  );
88 
89  const getObserver = useCallback(() => {
90    if (typeof ResizeObserver === "undefined") return null;
91 
92// … truncated