usehooks-ts
Version:
React hook library, ready to use, written in Typescript.
23 lines • 1.3 kB
JavaScript
import { useEffect, useState } from 'react';
function useIntersectionObserver(elementRef, _a) {
var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
var _f = useState(), entry = _f[0], setEntry = _f[1];
var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
var updateEntry = function (_a) {
var entry = _a[0];
setEntry(entry);
};
useEffect(function () {
var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
var hasIOSupport = !!window.IntersectionObserver;
if (!hasIOSupport || frozen || !node)
return;
var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
var observer = new IntersectionObserver(updateEntry, observerParams);
observer.observe(node);
return function () { return observer.disconnect(); };
}, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);
return entry;
}
export default useIntersectionObserver;
//# sourceMappingURL=useIntersectionObserver.js.map