react-native-ultimate-paginator
Version:
A comprehensive pagination library supporting various pagination scenarios including server-side, client-side, infinite scroll, and load-more functionality
30 lines (29 loc) • 1.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useInfiniteScroll = useInfiniteScroll;
var react_1 = require("react");
function useInfiniteScroll(_a) {
var _b = _a.threshold, threshold = _b === void 0 ? 100 : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.hasMore, hasMore = _d === void 0 ? true : _d, onLoadMore = _a.onLoadMore;
var scrollRef = (0, react_1.useRef)(null);
var handleScroll = (0, react_1.useCallback)(function () {
if (!scrollRef.current || loading || !hasMore)
return;
var element = scrollRef.current;
var scrollTop = element.scrollTop, scrollHeight = element.scrollHeight, clientHeight = element.clientHeight;
if (scrollHeight - scrollTop - clientHeight < threshold) {
onLoadMore();
}
}, [threshold, loading, hasMore, onLoadMore]);
(0, react_1.useEffect)(function () {
var element = scrollRef.current;
if (!element)
return;
element.addEventListener('scroll', handleScroll);
return function () { return element.removeEventListener('scroll', handleScroll); };
}, [handleScroll]);
return {
scrollRef: scrollRef,
isLoading: loading,
hasMore: hasMore
};
}