@payfit/unity-components
Version:
64 lines (63 loc) • 2.4 kB
TypeScript
export interface UsePaginationStateOptions {
/**
* The total number of pages.
* Use -1 to indicate an unknown page count (e.g., for server-paginated data where total pages are not known upfront).
*/
pageCount: number;
/**
* The initial page to start at (1-based)
* @default 1
*/
initialPage?: number;
/**
* Callback fired when the page changes
* @param page - The new page number
* @param previous - The previous page number
* @param direction - The direction of navigation (1 for forward, -1 for backward)
*/
onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
}
/**
* Hook that manages pagination state for client-side pagination.
* This hook provides state management and navigation helpers for pagination components.
* @param options - Configuration options for pagination state
* @param options.pageCount - The total number of pages.
* @param options.initialPage - The initial page to start at (1-based)
* @param options.onPageChange - Callback fired when the page changes
* @returns Object containing current pagination state and navigation functions: currentPage (current active page), previousPage (page before current), nextPage (page after current), and goToPage (navigation function accepting page number or 'next'/'previous')
* @example
* ```tsx
* import { usePaginationState, Pagination, PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components'
*
* function MyPagination() {
* const { currentPage, goToPage } = usePaginationState({
* pageCount: 10,
* initialPage: 1,
* })
*
* return (
* <Pagination
* pageCount={10}
* currentPage={currentPage}
* onPageChange={goToPage}
* >
* <PaginationContent>
* {Array.from({ length: 10 }, (_, i) => i + 1).map(page => (
* <PaginationItem key={page}>
* <RawPaginationLink value={page}>
* {page}
* </RawPaginationLink>
* </PaginationItem>
* ))}
* </PaginationContent>
* </Pagination>
* )
* }
* ```
*/
export declare function usePaginationState({ pageCount, initialPage, onPageChange, }: UsePaginationStateOptions): {
currentPage: number;
previousPage: number;
nextPage: number;
goToPage: (page: "previous" | "next" | number) => void;
};