usePagination
function usePagination(itemPerPage, trackReferences): {
totalPageCount: number;
nextPage: () => void;
prevPage: () => void;
setPage: (num) => void;
firstItemIndex: number;
lastItemIndex: number;
tracks: unknown[];
currentPage: number;
};Defined in: packages/react/src/hooks/layout/usePagination.ts:33
Note. This feature is experimental and may change or be removed based on developer feedback and real-world usage. The usePagination hook implements simple pagination logic for use with arrays.
Parameters
| Parameter | Type |
|---|---|
itemPerPage | number |
trackReferences | unknown[] |
Returns
{
totalPageCount: number;
nextPage: () => void;
prevPage: () => void;
setPage: (num) => void;
firstItemIndex: number;
lastItemIndex: number;
tracks: unknown[];
currentPage: number;
}totalPageCount
totalPageCount: number;nextPage
nextPage: () => void;Returns
void
prevPage
prevPage: () => void;Returns
void
setPage
setPage: (num) => void;Parameters
| Parameter | Type |
|---|---|
num | number |
Returns
void
firstItemIndex
firstItemIndex: number;lastItemIndex
lastItemIndex: number;tracks
tracks: unknown[];currentPage
currentPage: number;Example
// Basic — paginate track references four at a time.
const pagination = usePagination(4, tracks);
// Advanced — page a camera grid and wire navigation buttons.
function PagedGallery() {
const tracks = useTracks([{ source: Track.Source.Camera, withPlaceholder: true }]);
const pagination = usePagination(4, tracks);
return <>
<GridLayout tracks={pagination.tracks}><ParticipantTile /></GridLayout>
<button onClick={pagination.prevPage} disabled={pagination.currentPage === 1}>Previous</button>
<button onClick={pagination.nextPage} disabled={pagination.currentPage === pagination.totalPageCount}>Next</button>
</>;
}
function App() {
return <VoiceRoom agent={agent}><PagedGallery /></VoiceRoom>;
}