Load More

An infinite-scroll / “load more” trigger with a progress track and count. onLoad is awaited so the component can drive its own loading state.

Usage


import { LoadMore } from '@mav-labs-inc/mavkit-react'
 
<LoadMore
  loaded={items.length}
  total={248}
  batchSize={20}
  onLoad={loadMoreItems}
  autoObserve
/>

Example

Click “Load more” — this demo simulates a 600ms fetch.

20 / 248

Props

Prop	Type	Default	Description
loaded	number	0
total	number	0
batchSize	number	20
autoObserve	boolean	false	Trigger onLoad automatically when the component scrolls into view (via IntersectionObserver).
onLoad	(batchSize: number) => Promise<void> \| void	—	Load callback — awaited so the component can drive its own loading state.
className	string	—