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

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

{"version":3,"sources":["../src/hooks/useIntersectionObserver.ts"],"names":["useIntersectionObserver","elementRef","threshold","root","rootMargin","freezeOnceVisible","entry","setEntry","useState","useEffect","element","observer"],"mappings":"uCAYO,SAASA,CAAAA,CACdC,EACA,CACE,SAAA,CAAAC,EAAY,CACZ,CAAA,IAAA,CAAAC,EAAO,IACP,CAAA,UAAA,CAAAC,EAAa,IACb,CAAA,iBAAA,CAAAC,CAAoB,CAAA,CAAA,CACtB,CAAyB,CAAA,GACS,CAClC,GAAM,CAACC,CAAOC,CAAAA,CAAQ,EAAIC,QAA2C,CAAA,IAAI,EAEzE,OAAAC,SAAAA,CAAU,IAAM,CACd,IAAMC,EAAUT,CAAW,CAAA,OAAA,CAI3B,GAHI,CAACS,CAAAA,EAGDL,CAAqBC,GAAAA,CAAAA,EAAA,IAAAA,EAAAA,CAAAA,CAAO,gBAAgB,OAEhD,IAAMK,EAAW,IAAI,oBAAA,CACnB,CAAC,CAACL,CAAK,IAAM,CACXC,CAAAA,CAASD,CAAK,EAChB,CAAA,CACA,CAAE,SAAAJ,CAAAA,CAAAA,CAAW,KAAAC,CAAM,CAAA,UAAA,CAAAC,CAAW,CAChC,CAEA,CAAA,OAAAO,EAAS,OAAQD,CAAAA,CAAO,EAEjB,IAAM,CACXC,EAAS,UAAW,GACtB,CACF,CAAG,CAAA,CAACV,EAAYC,CAAWC,CAAAA,CAAAA,CAAMC,EAAYC,CAAmBC,CAAAA,CAAAA,EAAA,YAAAA,CAAO,CAAA,cAAc,CAAC,CAAA,CAE/EA,CACT","file":"useIntersectionObserver.mjs","sourcesContent":["import { useState, useEffect, RefObject } from \"react\";\n\ninterface IntersectionOptions extends IntersectionObserverInit {\n  freezeOnceVisible?: boolean;\n}\n\n/**\n * Hook that tracks element's intersection with viewport using IntersectionObserver\n * @param elementRef - React ref object pointing to the target element\n * @param options - IntersectionObserver options with additional freezeOnceVisible flag\n * @returns IntersectionObserverEntry if available, null otherwise\n */\nexport function useIntersectionObserver(\n  elementRef: RefObject<HTMLElement>,\n  {\n    threshold = 0,\n    root = null,\n    rootMargin = \"0%\",\n    freezeOnceVisible = false,\n  }: IntersectionOptions = {}\n): IntersectionObserverEntry | null {\n  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    // Don't observe if element is already visible and freeze is enabled\n    if (freezeOnceVisible && entry?.isIntersecting) return;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setEntry(entry);\n      },\n      { threshold, root, rootMargin }\n    );\n\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [elementRef, threshold, root, rootMargin, freezeOnceVisible, entry?.isIntersecting]);\n\n  return entry;\n} "]}