react-hook-inview
Version:
React Hook for detecting when an element is in the viewport
59 lines (58 loc) • 2.58 kB
JavaScript
;
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var useObserver_1 = __importDefault(require("./useObserver"));
/**
* useInView
* @param options IntersectionObserverInit
* @param externalState React.ComponentState[]
*/
var useInView = function (_a, externalState) {
var _b = _a === void 0 ? {} : _a, root = _b.root, rootMargin = _b.rootMargin, threshold = _b.threshold, unobserveOnEnter = _b.unobserveOnEnter, target = _b.target, onEnter = _b.onEnter, onLeave = _b.onLeave, defaultInView = _b.defaultInView;
if (externalState === void 0) { externalState = []; }
var _c = react_1.useState({
inView: defaultInView || false,
entry: null,
observer: null,
}), state = _c[0], setState = _c[1];
var callback = react_1.useCallback(function (_a, observer) {
var entry = _a[0];
var inThreshold = observer.thresholds.some(function (t) { return entry.intersectionRatio >= t; });
var inView = inThreshold && entry.isIntersecting;
setState({
inView: inView,
entry: entry,
observer: observer,
});
// unobserveOnEnter
if (inView && unobserveOnEnter) {
observer.unobserve(entry.target);
observer.disconnect();
}
// Legacy callbacks
if (inView) {
onEnter === null || onEnter === void 0 ? void 0 : onEnter(entry, observer);
}
else {
onLeave === null || onLeave === void 0 ? void 0 : onLeave(entry, observer);
}
}, [onEnter, onLeave, unobserveOnEnter]);
var setTarget = useObserver_1.default(callback, { root: root, rootMargin: rootMargin, threshold: threshold }, __spreadArrays([unobserveOnEnter], externalState));
// Legacy 'target' option
react_1.useEffect(function () {
if (target === null || target === void 0 ? void 0 : target.current)
setTarget(target.current);
}, [target, setTarget]);
return [setTarget, state.inView, state.entry, state.observer];
};
exports.default = useInView;