@visa/nova-react/use-pagination/index.d.ts

Visa Product Design System Nova React library

type UsePaginationOptions = {
    /** Default selected page */
    defaultSelected?: number;
    /** Maximum length of pages to show on the end pagination block */
    endBlockMaxLength?: number;
    /** Maximum page number to be shown, (default null for no maximum) */
    maxPageNumber?: number | null;
    /** Maximum length of pages to show on the middle pagination block */
    middleBlockMaxLength?: number;
    /** What to separate the pagination array up with, usually this separator will be replaced with icon or ellipses when shown in the UI */
    separator?: number | string;
    /** Maximum length of pages to show on the start pagination block */
    startBlockMaxLength?: number;
    /** Start from this page */
    startPage?: number;
    /** Length of total pages */
    totalPages: number;
};
/**
 * @docs {@link https://design.visa.com/react/hooks/use-pagination | See Docs}
 * @description This hook is used to manage pagination events, state, and visible page blocks.
 * @related pagination
 * @vgar TODO
 * @wcag TODO
 */
export declare const usePagination: {
    (usePaginationOptions: UsePaginationOptions): {
        /** Is first page currently selected */
        isFirstPage: boolean;
        /** Is last page currently selected */
        isLastPage: boolean;
        /** Event to handle first page selection */
        onFirstPage: () => void;
        /** Event to handle last page selection */
        onLastPage: () => void;
        /** Event to handle next page selection */
        onNextPage: () => void;
        /** Event to handle page selection */
        onPageChange: (pageNumber: number) => void;
        /** Event to handle previous page selection */
        onPreviousPage: () => void;
        /** Array of currently visible pages split by separator */
        pages: (string | number)[];
        /** Currently selected page */
        selectedPage: number;
    };
    displayName: string;
    defaultProps: {
        defaultSelected: number;
        endBlockMaxLength: number;
        maxPageNumber: null;
        middleBlockMaxLength: number;
        separator: number;
        startBlockMaxLength: number;
        startPage: number;
    };
};
export default usePagination;
export { calculatePagesFromTo, calculateTotalPages } from './utils';