25 lines · 775 B · TypeScript
RawDownload
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;}