@thibault.sh/hooks/dist/useContainerScroll.cjs.map

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

{"version":3,"sources":["../src/hooks/useContainerScroll.ts"],"names":["useContainerScroll","containerRef","delay","scroll","setScroll","useState","useEffect","scrollTimeout","element","handleScroll","scrollTop","scrollLeft","scrollWidth","scrollHeight","clientWidth","clientHeight","prev","__spreadProps","__spreadValues"],"mappings":"0FAkBO,SAASA,CAAmBC,CAAAA,CAAAA,CAA6CC,CAAgB,CAAA,GAAA,CAAsB,CACpH,GAAM,CAACC,CAAQC,CAAAA,CAAS,CAAIC,CAAAA,cAAAA,CAA0B,CACpD,SAAA,CAAW,CACX,CAAA,UAAA,CAAY,CACZ,CAAA,WAAA,CAAa,CACb,CAAA,YAAA,CAAc,CACd,CAAA,WAAA,CAAa,CACb,CAAA,YAAA,CAAc,EACd,WAAa,CAAA,CAAA,CACf,CAAC,CAAA,CAED,OAAAC,eAAAA,CAAU,IAAM,CACd,GAAI,CAACL,CAAa,CAAA,OAAA,CAAS,OAE3B,IAAIM,CACEC,CAAAA,CAAAA,CAAUP,EAAa,OAEvBQ,CAAAA,CAAAA,CAAe,IAAM,CACzB,GAAM,CAAE,SAAAC,CAAAA,CAAAA,CAAW,UAAAC,CAAAA,CAAAA,CAAY,WAAAC,CAAAA,CAAAA,CAAa,YAAAC,CAAAA,CAAAA,CAAc,WAAAC,CAAAA,CAAAA,CAAa,aAAAC,CAAa,CAAA,CAAIP,CAExFJ,CAAAA,CAAAA,CAAWY,CAAU,GAAA,CACnB,SAAAN,CAAAA,CAAAA,CACA,UAAAC,CAAAA,CAAAA,CACA,WAAAC,CAAAA,CAAAA,CACA,YAAAC,CAAAA,CAAAA,CACA,WAAAC,CAAAA,CAAAA,CACA,aAAAC,CACA,CAAA,WAAA,CAAa,CACf,CAAA,CAAA,CAAE,CAEF,CAAA,YAAA,CAAaR,CAAa,CAAA,CAC1BA,CAAgB,CAAA,UAAA,CAAW,IAAM,CAC/BH,CAAWY,CAAAA,CAAAA,EAAUC,mBAAAC,CAAAA,mBAAAA,CAAA,GAAKF,CAAL,CAAA,CAAA,CAAW,WAAa,CAAA,CAAA,CAAM,CAAE,CAAA,EACvD,CAAGd,CAAAA,CAAK,EACV,CAAA,CAEA,OAAAM,CAAAA,CAAQ,gBAAiB,CAAA,QAAA,CAAUC,CAAY,CAAA,CAC/CA,GAEO,CAAA,IAAM,CACXD,CAAAA,CAAQ,mBAAoB,CAAA,QAAA,CAAUC,CAAY,CAAA,CAClD,YAAaF,CAAAA,CAAa,EAC5B,CACF,CAAG,CAAA,CAACN,CAAY,CAAC,EAEVE,CACT","file":"useContainerScroll.cjs","sourcesContent":["import { useState, useEffect, RefObject } from \"react\";\n\ninterface ContainerScroll {\n  scrollTop: number;\n  scrollLeft: number;\n  scrollWidth: number;\n  scrollHeight: number;\n  clientWidth: number;\n  clientHeight: number;\n  isScrolling: boolean;\n}\n\n/**\n * Hook that tracks scroll position and dimensions of a container element\n * @param containerRef - React ref object pointing to the container element\n * @param delay - Delay in milliseconds before setting isScrolling to false\n * @returns Object containing scroll position and dimension information\n */\nexport function useContainerScroll(containerRef: RefObject<HTMLElement | null>, delay: number = 150): ContainerScroll {\n  const [scroll, setScroll] = useState<ContainerScroll>({\n    scrollTop: 0,\n    scrollLeft: 0,\n    scrollWidth: 0,\n    scrollHeight: 0,\n    clientWidth: 0,\n    clientHeight: 0,\n    isScrolling: false,\n  });\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    let scrollTimeout: ReturnType<typeof setTimeout>;\n    const element = containerRef.current;\n\n    const handleScroll = () => {\n      const { scrollTop, scrollLeft, scrollWidth, scrollHeight, clientWidth, clientHeight } = element;\n\n      setScroll((prev) => ({\n        scrollTop,\n        scrollLeft,\n        scrollWidth,\n        scrollHeight,\n        clientWidth,\n        clientHeight,\n        isScrolling: true,\n      }));\n\n      clearTimeout(scrollTimeout);\n      scrollTimeout = setTimeout(() => {\n        setScroll((prev) => ({ ...prev, isScrolling: false }));\n      }, delay);\n    };\n\n    element.addEventListener(\"scroll\", handleScroll);\n    handleScroll();\n\n    return () => {\n      element.removeEventListener(\"scroll\", handleScroll);\n      clearTimeout(scrollTimeout);\n    };\n  }, [containerRef]);\n\n  return scroll;\n}\n"]}