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

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

{"version":3,"sources":["../src/hooks/useElementSize.ts"],"names":["useElementSize","elementRef","size","setSize","useState","useEffect","element","resizeObserver","entries","width","height"],"mappings":"uCAYO,SAASA,CAAAA,CAAeC,EAAiD,CAC9E,GAAM,CAACC,CAAMC,CAAAA,CAAO,EAAIC,QAAsB,CAAA,CAC5C,MAAO,CACP,CAAA,MAAA,CAAQ,CACV,CAAC,CAAA,CAED,OAAAC,SAAU,CAAA,IAAM,CACd,GAAI,CAACJ,EAAW,OAAS,CAAA,OAEzB,IAAMK,CAAUL,CAAAA,CAAAA,CAAW,QACrBM,CAAiB,CAAA,IAAI,eAAgBC,CAAY,EAAA,CACrD,GAAI,CAACA,CAAAA,CAAQ,CAAC,CAAG,CAAA,OAEjB,GAAM,CAAE,KAAA,CAAAC,EAAO,MAAAC,CAAAA,CAAO,EAAIF,CAAQ,CAAA,CAAC,EAAE,WACrCL,CAAAA,CAAAA,CAAQ,CAAE,KAAAM,CAAAA,CAAAA,CAAO,OAAAC,CAAO,CAAC,EAC3B,CAAC,CAAA,CAED,OAAAH,CAAe,CAAA,OAAA,CAAQD,CAAO,CAC9BH,CAAAA,CAAAA,CAAQ,CACN,KAAOG,CAAAA,CAAAA,CAAQ,YACf,MAAQA,CAAAA,CAAAA,CAAQ,YAClB,CAAC,CAAA,CAEM,IAAM,CACXC,CAAAA,CAAe,aACjB,CACF,EAAG,CAACN,CAAU,CAAC,CAAA,CAERC,CACT","file":"useElementSize.mjs","sourcesContent":["import { useState, useEffect, RefObject } from \"react\";\n\ninterface ElementSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Hook that tracks an element's dimensions using ResizeObserver\n * @param elementRef - React ref object pointing to the target element\n * @returns Object containing current element width and height\n */\nexport function useElementSize(elementRef: RefObject<HTMLElement>): ElementSize {\n  const [size, setSize] = useState<ElementSize>({\n    width: 0,\n    height: 0,\n  });\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\n      const { width, height } = entries[0].contentRect;\n      setSize({ width, height });\n    });\n\n    resizeObserver.observe(element);\n    setSize({\n      width: element.offsetWidth,\n      height: element.offsetHeight,\n    });\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [elementRef]);\n\n  return size;\n}\n"]}