beautiful-react-hooks/useInfiniteScroll.js

A collection of beautiful (and hopefully useful) React hooks to speed-up your components and hooks development

"use strict";
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 createHandlerSetter_1 = __importDefault(require("./factory/createHandlerSetter"));
var safeHasOwnProperty_1 = __importDefault(require("./shared/safeHasOwnProperty"));
var useEvent_1 = __importDefault(require("./useEvent"));
/**
 * Accepts an HTML Element ref, then returns a function that allows you to handle the infinite
 * scroll for that specific element.
 */
var useInfiniteScroll = function (ref, delay) {
    if (delay === void 0) { delay = 250; }
    var onScroll = (0, useEvent_1.default)(ref, 'scroll', { passive: true });
    var _a = (0, createHandlerSetter_1.default)(), onScrollEnd = _a[0], setOnScrollEnd = _a[1];
    if (ref && !(0, safeHasOwnProperty_1.default)(ref, 'current')) {
        throw new Error('Unable to assign any scroll event to the given ref');
    }
    var handleScroll = (0, react_1.useCallback)(function (_a) {
        var target = _a.target;
        var el = target;
        if (el) {
            var isBottom = el.scrollHeight - el.scrollTop === el.clientHeight;
            if (isBottom && onScrollEnd.current && typeof onScrollEnd.current === 'function') {
                setTimeout(onScrollEnd.current, delay);
            }
        }
    }, []);
    onScroll(handleScroll);
    return setOnScrollEnd;
};
exports.default = useInfiniteScroll;