Infinite Scroll

High-performance infinite scroll hook for React using the Intersection Observer API.

Installation

npm install @windowing-kit/infinite-scroll
# or
pnpm add @windowing-kit/infinite-scroll
# or
yarn add @windowing-kit/infinite-scroll

Quick Start

import { useInfiniteScroll } from "@windowing-kit/infinite-scroll";
import { useInfiniteState } from "./useInfiniteState";

function MyInfiniteList() {
  const { items, hasNextPage, loading, fetchData } = useInfiniteState();

  const { ref, isFetching } = useInfiniteScroll({
    loading,
    hasNextPage,
    onLoadMore: fetchData,
    rootMargin: "200px",
    initialLoad: true,
  });

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
      <div ref={ref}>
        {isFetching && <div>Loading...</div>}
        {!hasNextPage && <div>No more items</div>}
      </div>
    </div>
  );
}

API

useInfiniteScroll(options)

Infinite scroll hook.

Options

Property	Type	Required	Default	Description
loading	boolean	Yes	-	Whether data is currently being loaded
hasNextPage	boolean	Yes	-	Whether there is more data to load
onLoadMore	() => void | Promise<void>	Yes	-	Callback function to load more data
rootMargin	string	No	"0px"	Root margin for Intersection Observer
disabled	boolean	No	false	Whether to disable infinite scroll
delayInMs	number	No	100	Delay in milliseconds before triggering onLoadMore
initialLoad	boolean	No	false	Whether to automatically load data on initial mount

Return

Property	Type	Description
ref	VisibilityRefCallback	Ref callback to attach to the trigger element (usually the last item or sentinel)
isFetching	boolean	Whether data is currently being fetched (same as loading)

Examples

Basic Usage

function InfiniteList() {
  const { items, hasNextPage, loading, fetchData } = useInfiniteState();

  const { ref, isFetching } = useInfiniteScroll({
    loading,
    hasNextPage,
    onLoadMore: fetchData,
  });

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
      <div ref={ref}>{isFetching && <Spinner />}</div>
    </div>
  );
}

With Custom Root Margin

const { ref, isFetching } = useInfiniteScroll({
  loading,
  hasNextPage,
  onLoadMore: loadMore,
  rootMargin: "300px", // Start loading 300px before reaching the bottom
});

Disable on Condition

const { ref, isFetching } = useInfiniteScroll({
  loading,
  hasNextPage,
  onLoadMore: loadMore,
  disabled: !user.isAuthenticated, // Disable if user is not authenticated
});

Initial Load

const { ref, isFetching } = useInfiniteScroll({
  loading,
  hasNextPage,
  onLoadMore: loadMore,
  initialLoad: true, // Automatically load data when component mounts
});