spb/countryatlas

1'use client';2import { useEffect, useRef, useState } from 'react';34/**5 * Measure an element's width with ResizeObserver. Returns `defaultWidth` during SSR and the first client6 * render so server and client markup match; the chart re-renders once the real width is known.7 */8export function useMeasure<T extends HTMLElement = HTMLDivElement>(defaultWidth = 640) {9  const ref = useRef<T | null>(null);10  const [width, setWidth] = useState(defaultWidth);11  useEffect(() => {12    const el = ref.current;13    if (!el) return;14    const apply = () => {15      const w = Math.round(el.getBoundingClientRect().width);16      if (w > 0) setWidth(w);17    };18    apply();19    if (typeof ResizeObserver === 'undefined') return;20    const ro = new ResizeObserver(() => apply());21    ro.observe(el);22    return () => ro.disconnect();23  }, []);24  return { ref, width } as const;25}26