@supunlakmal/hooks/dist/types/hooks/user-interface-dom/useInfiniteScroll.d.ts

A collection of reusable React hooks

interface UseInfiniteScrollOptions {
    loading: boolean;
    hasNextPage: boolean;
    onLoadMore: () => void;
    threshold?: number;
    root?: Element | null;
    rootMargin?: string;
}
/**
 * Custom hook to implement infinite scrolling.
 * It uses IntersectionObserver to detect when a target element is near the bottom
 * of the viewport or scrollable container, triggering a callback to load more data.
 *
 * @param {UseInfiniteScrollOptions} options - Configuration options.
 * @param {boolean} options.loading - Whether data is currently being loaded.
 * @param {boolean} options.hasNextPage - Whether there is more data to load.
 * @param {() => void} options.onLoadMore - Callback function to load more data.
 * @param {number} [options.threshold=0.1] - IntersectionObserver threshold (how much of the target needs to be visible). Defaults to 0.1.
 * @param {Element | null} [options.root=null] - The scrollable container element (defaults to viewport).
 * @param {string} [options.rootMargin='0px'] - IntersectionObserver rootMargin.
 * @returns {RefObject<any>} A ref object to attach to the target element that triggers loading more data when it becomes visible.
 * @returns {(node: T | null) => void} A callback ref setter function to attach to the target element.
 */
export declare const useInfiniteScroll: <T extends Element>({ loading, hasNextPage, onLoadMore, root, rootMargin, threshold, }: UseInfiniteScrollOptions) => ((node: T | null) => void);
export {};