| import { useLayoutEffect, useState } from 'react' | |
| import type { RefObject } from 'react' | |
| export function useElementWidth<T extends HTMLElement>(ref: RefObject<T | null>): number { | |
| const [width, setWidth] = useState(0) | |
| useLayoutEffect(() => { | |
| const el = ref.current | |
| if (!el) return | |
| const ro = new ResizeObserver(() => setWidth(el.clientWidth)) | |
| ro.observe(el) | |
| setWidth(el.clientWidth) | |
| return () => ro.disconnect() | |
| }, [ref]) | |
| return width | |
| } | |