@thibault.sh/hooks/dist/useResizeObserver.mjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useResizeObserver.ts"],"names":["useResizeObserver","elementRef","entry","setEntry","useState","useEffect","element","resizeObserver","entries"],"mappings":"uCAeO,SAASA,CACdC,CAAAA,CAAAA,CAC4B,CAC5B,GAAM,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,QAAqC,CAAA,IAAI,CAEnE,CAAA,OAAAC,SAAU,CAAA,IAAM,CACd,GAAI,CAACJ,CAAAA,CAAW,OAAS,CAAA,OAEzB,IAAMK,CAAAA,CAAUL,CAAW,CAAA,OAAA,CACrBM,CAAiB,CAAA,IAAI,cAAgBC,CAAAA,CAAAA,EAAY,CAChDA,CAAAA,CAAQ,CAAC,CAAA,EACdL,CAASK,CAAAA,CAAAA,CAAQ,CAAC,CAAC,EACrB,CAAC,CAED,CAAA,OAAAD,CAAe,CAAA,OAAA,CAAQD,CAAO,CAAA,CAEvB,IAAM,CACXC,CAAe,CAAA,UAAA,GACjB,CACF,CAAG,CAAA,CAACN,CAAU,CAAC,EAERC,CACT","file":"useResizeObserver.mjs","sourcesContent":["import { useState, useEffect, RefObject } from \"react\";\n\ninterface ResizeObserverEntry {\n  contentRect: DOMRectReadOnly;\n  contentBoxSize: ReadonlyArray<ResizeObserverSize>;\n  borderBoxSize: ReadonlyArray<ResizeObserverSize>;\n  devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;\n  target: Element;\n}\n\n/**\n * Hook that tracks element's size changes using ResizeObserver with full entry details\n * @param elementRef - React ref object pointing to the target element\n * @returns Latest ResizeObserverEntry if available, null otherwise\n */\nexport function useResizeObserver(\n  elementRef: RefObject<HTMLElement>\n): ResizeObserverEntry | null {\n  const [entry, setEntry] = useState<ResizeObserverEntry | null>(null);\n\n  useEffect(() => {\n    if (!elementRef.current) return;\n\n    const element = elementRef.current;\n    const resizeObserver = new ResizeObserver((entries) => {\n      if (!entries[0]) return;\n      setEntry(entries[0]);\n    });\n\n    resizeObserver.observe(element);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [elementRef]);\n\n  return entry;\n} "]}