📦 react-virtual-infinite-scroll-hook

A lightweight React hook for infinite scrolling with virtual scrollbars (like Ant Design tables).
Easily detect when the scrollbar thumb reaches the bottom and trigger data loading.

✨ Features

• ⚡ Works with virtual scrollbars (AntD, custom scrollbars, etc.)
• 🎛 Configurable offset & throttleDelay
• ✅ Handles hasMore & loading states
• 🔌 Supports both ref and CSS selectors
• 🐞 Optional debug logs
• 📴 Can be enabled/disabled dynamically

📦 Installation

npm install react-virtual-infinite-scroll-hook

🚀 Usage

import { Table } from "antd";
import React, { useState, useEffect } from "react";
import useVirtualInfiniteScroll from "react-virtual-infinite-scroll-hook";
import { fetchData } from "../helpers/fetchData";
import { COLUMNS } from "../helpers/constants";

const AntdTableVirtualWithInfiniteScroll: React.FC = () => {
  const [data, setData] = useState<any[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const loadMore = async () => {
    if (loading || !hasMore) return;
    setLoading(true);
    const newData = await fetchData(page, 10);
    setData((prev) => [...prev, ...newData]);
    setHasMore(newData.length > 0);
    setPage((p) => p + 1);
    setLoading(false);
  };

  useVirtualInfiniteScroll({
    onLoadMore: loadMore,
    hasMore,
    loading,
    scrollbarSelector: ".ant-table-tbody-virtual-scrollbar-vertical",
    // thumbSelector: ".ant-table-tbody-virtual-scrollbar-thumb",
    offset: 80, // trigger 80px before bottom
    throttleDelay: 100, // throttle observer updates
    debug: true, // see logs in console
    enabled: true,
  });

  useEffect(() => {
    loadMore();
  }, []);

  return (
    <div style={{ maxWidth: 700 }}>
      <Table
        bordered
        columns={COLUMNS}
        loading={loading}
        dataSource={data}
        pagination={false} //👈 disable pagination
        virtual={true} // 👈 enable virtual table
        scroll={{ y: 500 }} // 👈 Virtual table container height
      />
    </div>
  );
};

export default AntdTableVirtualWithInfiniteScroll;

🔧 API

| Prop | Type | Default | Description | | ------------------- | ------------------------------ | ------- | --------------------------------------- | | onLoadMore | () => void | req | Called when scroll reaches bottom | | hasMore | boolean | req | If false, stops triggering loads | | loading | boolean | req | Prevents multiple calls while loading | | offset | number | 0 | Trigger before reaching bottom (px) | | throttleDelay | number | 200 | Throttle delay for scroll handler (ms) | | scrollbarRef | React.RefObject<HTMLElement> | null | Ref for scrollbar container (preferred) | | scrollbarSelector | string | null | CSS selector for scrollbar (fallback) | | thumbSelector | string | null | CSS selector for scrollbar thumb | | enabled | boolean | true | Enable/disable infinite scroll | | debug | boolean | false | Log debug info |

📜 License

MIT © Sudip Kundu