() => { abortController.abort(); }; }, [ref, enabled]); } 20:T632,"use client"; import * as React from "react"; export function useElementSize( ref: React.RefObject ): { width: number | null; height: number | null }; export function useElementSize( ref: React.RefObject, initial: { width: number; height: number; } ): { width: number; height: number; }; export function useElementSize( ref: React.RefObject, initial?: { width: number; height: number; } ) { const [size, setSize] = React.useState({ width: initial?.width ?? null, height: initial?.height ?? null, }); const previousObserver = React.useRef(null); React.useEffect(() => { const element = ref.current; if (previousObserver.current) { previousObserver.current.disconnect(); previousObserver.current = null; } if (element?.nodeType === Node.ELEMENT_NODE) { const observer = new ResizeObserver(([entry]) => { if (entry && entry.borderBoxSize) { const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0]; if (width !== size.width || height !== size.height) { setSize({ width, height }); } } }); observer.observe(element, { box: "border-box" }); previousObserver.current = observer; } return () => { if (previousObserver.current) { previousObserver.current.disconnect(); previousObserver.current = null; } }; }, [ref]); return size; } 21:T632,"use client"; import * as React from "react"; export function useElementSize( ref: React.RefObject ): { width: number | null; height: number | null }; export function useElementSize( ref: React.RefObject, initial: { width: number; height: number; } ): { width: number; height: number; }; export

hookas

DOM & Events

hookas

hookas

hookas

hookas