| 1 | {"version":3,"sources":["useViewportSpy.js"],"names":["defaultOptions","root","undefined","rootMargin","threshold","useViewportSpy","elementRef","options","isVisible","setIsVisible","observer","IntersectionObserver","entries","forEach","item","nextValue","isIntersecting","observe","current","disconnect"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAEA,IAAMA,cAAc,GAAG;AACrBC,EAAAA,IAAI,EAAEC,SADe;AAErBC,EAAAA,UAAU,EAAE,KAFS;AAGrBC,EAAAA,SAAS,EAAE;AAHU,CAAvB;;AAUA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,UAAD,EAA0C;AAAA,MAA7BC,OAA6B,uEAAnBP,cAAmB;;AAAA,kBAC7B,sBAD6B;AAAA;AAAA,MACxDQ,SADwD;AAAA,MAC7CC,YAD6C;;AAG/D,8BAAgB,YAAM;AACpB,QAAMC,QAAQ,GAAG,IAAIC,oBAAJ,CAAyB,UAACC,OAAD;AAAA,aAAaA,OAAO,CAACC,OAAR,CAAgB,UAACC,IAAD,EAAU;AAC/E,YAAMC,SAAS,GAAGD,IAAI,CAACE,cAAvB;AACAP,QAAAA,YAAY,CAACM,SAAD,CAAZ;AACD,OAHsD,CAAb;AAAA,KAAzB,EAGbR,OAHa,CAAjB;AAKAG,IAAAA,QAAQ,CAACO,OAAT,CAAiBX,UAAU,CAACY,OAA5B;AAEA,WAAO,YAAM;AACXR,MAAAA,QAAQ,CAACS,UAAT,CAAoBb,UAAU,CAACY,OAA/B;AACD,KAFD;AAGD,GAXD,EAWG,CAACZ,UAAD,CAXH;AAaA,SAAOE,SAAP;AACD,CAjBD;;eAmBeH,c","sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nconst defaultOptions = {\n root: undefined,\n rootMargin: '0px',\n threshold: 0,\n};\n\n/**\n * Uses the IntersectionObserverMock API to tell whether the given DOM Element (from useRef) is visible within the\n * viewport.\n */\nconst useViewportSpy = (elementRef, options = defaultOptions) => {\n const [isVisible, setIsVisible] = useState();\n\n useLayoutEffect(() => {\n const observer = new IntersectionObserver((entries) => entries.forEach((item) => {\n const nextValue = item.isIntersecting;\n setIsVisible(nextValue);\n }), options);\n\n observer.observe(elementRef.current);\n\n return () => {\n observer.disconnect(elementRef.current);\n };\n }, [elementRef]);\n\n return isVisible;\n};\n\nexport default useViewportSpy;\n"],"file":"useViewportSpy.js"} |