ahooks
Version:
react hooks library
47 lines • 1.62 kB
JavaScript
import { __assign, __read, __values } from "tslib";
import 'intersection-observer';
import { useState } from 'react';
import { getTargetElement } from '../utils/domTarget';
import useEffectWithTarget from '../utils/useEffectWithTarget';
function useInViewport(target, options) {
var _a = __read(useState(), 2),
state = _a[0],
setState = _a[1];
var _b = __read(useState(), 2),
ratio = _b[0],
setRatio = _b[1];
useEffectWithTarget(function () {
var el = getTargetElement(target);
if (!el) {
return;
}
var observer = new IntersectionObserver(function (entries) {
var e_1, _a;
try {
for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
var entry = entries_1_1.value;
setRatio(entry.intersectionRatio);
setState(entry.isIntersecting);
}
} catch (e_1_1) {
e_1 = {
error: e_1_1
};
} finally {
try {
if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
} finally {
if (e_1) throw e_1.error;
}
}
}, __assign(__assign({}, options), {
root: getTargetElement(options === null || options === void 0 ? void 0 : options.root)
}));
observer.observe(el);
return function () {
observer.disconnect();
};
}, [options === null || options === void 0 ? void 0 : options.rootMargin, options === null || options === void 0 ? void 0 : options.threshold], target);
return [state, ratio];
}
export default useInViewport;