useLoadMore
Universal pagination and load-more trigger supporting async data fetchers and client-side array batching.
3.8 KB
•Updated on September 3, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/hooks-form-use-load-moreUsage
Code
import { useLoadMore } from '@/hooks/use-load-more'
// Pattern 1: Async loader function
const { loading, trigger, page } = useLoadMore(async (pageNumber) => {
await fetchArticles(pageNumber)
})
// Pattern 2: Client-side array slicing
const { data, loadMore, loading, hasMore } = useLoadMore({
dataSource: allProducts,
initialCount: 6,
incrementCount: 6,
})API Reference
Parameters / Props
| Parameter | Type | Default | Description |
|---|---|---|---|
fetcher | (page: number) => Promise<any> | - | Async loader callback function. |
options.dataSource | T[] | - | Array to paginate client-side. |
options.initialCount | number | 3 | Initial number of items to display. |
options.incrementCount | number | 3 | Number of items to add on each load. |
Return Value
| Property | Type | Description |
|---|---|---|
loading | boolean | Whether data loading is currently in progress (alias: isLoading). |
loadMore | () => Promise<void> | Triggers the next batch or fetcher call (alias: trigger). |
hasMore | boolean | Whether more items are available. |
data | T[] | Currently visible items (when using dataSource). |
page | number | Current page number. |
reset() | Function | Resets pagination state to initial values. |