Infinite Scroll

Automatically load more items as the user scrolls near the bottom.

30 articles loaded · Scroll to load more

Use onScrollToBottom to trigger data fetching:

const { containerRef, handleScroll } = useVirtualList({
  data,
  getItemId: (item) => item.id,
  onScrollToBottom: () => {
    if (!loading && hasMore) loadMore();
  },
  scrollBottomThreshold: 300,
});

<div ref={containerRef} onScroll={handleScroll}>

Option	Type	Default
`onScrollToBottom`	`() => void`	—
`scrollBottomThreshold`	`number`	100