react-slide-fade-in
Version:
Customizable slide fade-in animation for react
29 lines (28 loc) • 1.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useIsVisible = void 0;
var react_1 = require("react");
function useIsVisible(_a) {
var _b = _a.offset, offset = _b === void 0 ? 0 : _b, _c = _a.persistent, persistent = _c === void 0 ? true : _c, _d = _a.minVisibleHeight, minVisibleHeight = _d === void 0 ? 0 : _d;
var _e = (0, react_1.useState)(false), isVisible = _e[0], setIsVisible = _e[1];
var currentElement = (0, react_1.useRef)(null);
var checkVisibility = function () {
if (!currentElement.current) {
return;
}
var top = currentElement.current.getBoundingClientRect().top;
if (top + offset >= 0 && top + minVisibleHeight - offset <= window.innerHeight) {
setIsVisible(true);
}
else if (!persistent) {
setIsVisible(false);
}
};
(0, react_1.useEffect)(function () {
checkVisibility();
document.addEventListener('scroll', checkVisibility, true);
return function () { return document.removeEventListener('scroll', checkVisibility, true); };
});
return [isVisible, currentElement];
}
exports.useIsVisible = useIsVisible;