rc-infinite-scroll-hook/dist/useInfiniteScroll.js

react infinite scroll hook

"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 throttle_1 = __importDefault(require("./throttle"));
var useInfiniteScroll = function (containerRef, fetchItems, triggerFetchPos) {
    if (triggerFetchPos === void 0) { triggerFetchPos = 300; }
    var _a = react_1.useState(false), isFetching = _a[0], setIsFetching = _a[1];
    react_1.useEffect(function () {
        if (containerRef.current) {
            containerRef.current.addEventListener('scroll', throttleOnScroll);
        }
        return function () {
            if (containerRef.current) {
                containerRef.current.removeEventListener('scroll', throttleOnScroll);
            }
        };
    }, []);
    react_1.useEffect(function () {
        if (isFetching) {
            fetchItems().finally(function () { return setIsFetching(false); });
        }
    }, [isFetching]);
    var throttleOnScroll = react_1.useCallback(throttle_1.default(function () {
        var el = containerRef.current;
        if (!isFetching && el && el.scrollTop + el.clientHeight + triggerFetchPos >= el.scrollHeight) {
            setIsFetching(true);
        }
    }), []);
    return [isFetching, setIsFetching];
};
exports.default = useInfiniteScroll;