InfinitePagination

Default pagination component for <InfiniteList>.

Installation

pnpm dlx shadcn@latest add @shadmin/infinite-pagination

<InfinitePagination> combines an IntersectionObserver (which fetches the next page when the sentinel scrolls into view) with a visible "Load more" button so keyboard users can trigger the same action explicitly.

Usage

<InfiniteList> already renders <InfinitePagination> for you. You only need to render it explicitly to customize its className or IntersectionObserver options:

import { InfiniteList, InfinitePagination } from "@/components/admin";
 
export const PostList = () => (
  <InfiniteList pagination={<InfinitePagination className="py-8" />}>
    {/* ... */}
  </InfiniteList>
);

<InfinitePagination> must be rendered inside an <InfinitePaginationContext> — typically as a child of <InfiniteList>. It will not work as a child of a regular <List>.

Props

PropRequiredTypeDefaultDescription
optionsOptionalIntersectionObserverInit{ threshold: 0 }Options forwarded to the underlying IntersectionObserver
classNameOptionalstring-Extra Tailwind classes appended to the wrapper

options

Forwarded to the underlying IntersectionObserver. Use it to tweak when the next page is fetched — for example, prefetch slightly before the sentinel becomes visible:

<InfinitePagination options={{ rootMargin: "200px" }} />

Translation Messages

<InfinitePagination> uses the following translation keys:

  • ra.navigation.next — label of the "Load more" button
  • ra.action.loading — label shown while the next page is being fetched