@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":"uCA6CO,SAASA,CACdC,CAAAA,CAAAA,CAC4B,CAC5B,GAAM,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,QAAqC,CAAA,IAAI,CAEnE,CAAA,OAAAC,SAAU,CAAA,IAAM,CACd,GAAI,EAACJ,CAAAA,EAAA,IAAAA,EAAAA,CAAAA,CAAY,OAAS,CAAA,CAAA,OAE1B,IAAMK,CAAUL,CAAAA,CAAAA,CAAW,OACrBM,CAAAA,CAAAA,CAAiB,IAAI,cAAA,CAAgBC,CAAY,EAAA,CAChDA,CAAQ,CAAA,CAAC,CACdL,EAAAA,CAAAA,CAASK,CAAQ,CAAA,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 observes element size changes using the ResizeObserver API.\n *\n * Provides detailed resize information including content rect, box sizes, and device pixel ratios.\n * Automatically cleans up the observer when the component unmounts or the ref changes.\n *\n * @param elementRef - React ref object pointing to the target element to observe\n *\n * @returns ResizeObserverEntry with detailed size information, or null if no element or no resize has occurred\n *   - `contentRect`: The content rectangle of the element\n *   - `contentBoxSize`: Array of content box dimensions\n *   - `borderBoxSize`: Array of border box dimensions\n *   - `devicePixelContentBoxSize`: Array of device pixel content box dimensions\n *   - `target`: The observed element\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const resizeEntry = useResizeObserver(containerRef);\n *\n *   const width = resizeEntry?.contentRect.width ?? 0;\n *   const height = resizeEntry?.contentRect.height ?? 0;\n *\n *   return (\n *     <div ref={containerRef}>\n *       <p>Size: {width} x {height}</p>\n *       <div>Content adapts based on container size</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see https://thibault.sh/hooks/use-resize-observer\n */\nexport function useResizeObserver<T extends HTMLElement>(\n  elementRef: RefObject<T | null> | null\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}\n"]}