import { useLayoutEffect, useState } from "react"; export function useElementWidth<T extends HTMLElement>() { const [element, setElement] = useState<T | null>(null); const [width, setWidth] = useState<number | null>(null); useLayoutEffect(() => { if (!element) return; const update = (nextWidth: number) => { setWidth((currentWidth) => (currentWidth === nextWidth ? currentWidth : nextWidth)); }; update(element.getBoundingClientRect().width); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(([entry]) => { if (entry) update(entry.contentRect.width); }); observer.observe(element); return () => observer.disconnect(); }, [element]); return [setElement, width] as const;}
import { useLayoutEffect, useState } from "react";
export function useElementWidth<T extends HTMLElement>() {
const [element, setElement] = useState<T | null>(null);
const [width, setWidth] = useState<number | null>(null);
useLayoutEffect(() => {
if (!element) return;
const update = (nextWidth: number) => {
setWidth((currentWidth) => (currentWidth === nextWidth ? currentWidth : nextWidth));
};
update(element.getBoundingClientRect().width);
if (typeof ResizeObserver === "undefined") return;
const observer = new ResizeObserver(([entry]) => {
if (entry) update(entry.contentRect.width);
});
observer.observe(element);
return () => observer.disconnect();
}, [element]);
return [setElement, width] as const;
}