react-virtual-infinite-scroll-hook

📦 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