@resourge/react-pagination/dist/index.d.ts

`react-pagination` is a small, highly customizable, component to render the pagination.

/**
 * react-pagination v1.2.0
 *
 * Copyright (c) resourge.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
 *
 * @license MIT
 */
import { CSSObject } from '@emotion/css/dist/declarations/src/create-instance';
import React, { ReactNode } from 'react';

type StylesProps = {
    disabled?: boolean;
    selected?: boolean;
};
type CustomStyles = {
    /**
     * @param base - Default styles for ul. {@link CSSObject}
     * @param props - Props containing if "page" is disabled or selected. {@link StylesProps}
     */
    a?: (base: CSSObject, props: StylesProps) => CSSObject;
    /**
     * @param base - Default styles for ul. {@link CSSObject}
     * @param props - Props containing if "page" is disabled or selected. {@link StylesProps}
     */
    li?: (base: CSSObject, props: StylesProps) => CSSObject;
    /**
     * @param base - Default styles for ul. {@link CSSObject}
     */
    ul?: (base: CSSObject) => CSSObject;
};

type Page = {
    /**
     * "Page" label
     */
    label: any;
    /**
     * Method to change page.
     */
    onClick: () => void;
    /**
     * Page number
     */
    page: number;
    /**
     * Type of "page".
     */
    type: 'page' | 'nextPage' | 'previousPage' | 'firstPage' | 'lastPage';
    /**
     * If "page" is disabled
     */
    disabled?: boolean;
    /**
     * If "page" is equal to currentPage
     */
    selected?: boolean;
};
type PaginationConfig = {
    /**
     * Method for "page" click
     */
    onPageChange: (page: number) => void;
    /**
     * Current page
     */
    page: number;
    /**
     * Total page number
     */
    totalPages: number;
    /**
     * If pagination is disabled
     */
    disabled?: boolean;
    /**
     * Number of "pages" displaying.
     * * Note: Current page will try to stay in the middle
     */
    displayRange?: number;
    /**
     * Defines the "page" for first page
     * * When undefined the item will not be included
     */
    firstLabel?: any | (() => any);
    /**
     * Defines the "page" for last page
     * * When undefined the item will not be included
     */
    lastLabel?: any | (() => any);
    /**
     * Defines the "page" for next page
     * * When undefined the item will not be included
     */
    nextLabel?: any | (() => any);
    /**
     * Defines the "page" for previous page
     * * When undefined the item will not be included
     */
    previousLabel?: any | (() => any);
};
/**
 * Method to generate an array of "pages"
 * @param config {@link PaginationConfig}
 * @returns an array containing the "pages"
 */
export declare const pagination: ({ page, totalPages, displayRange, disabled, onPageChange, firstLabel, previousLabel, nextLabel, lastLabel }: PaginationConfig) => Page[];

type UsePaginationProps = Pick<PaginationConfig, 'page' | 'totalPages' | 'displayRange' | 'disabled'> & {
    /**
     * Method for "page" click
     */
    onPageChange?: PaginationConfig['onPageChange'];
    /**
     * Method to render the "page" for first page
     * * When undefined the item will not be included
     */
    renderFirst?: ReactNode;
    /**
     * Method to render the "page" for last page
     * * When undefined the item will not be included
     */
    renderLast?: ReactNode;
    /**
     * Method to render the "page" for next page
     * * When undefined the item will not be included
     */
    renderNext?: ReactNode;
    /**
     * Method to render the "page" for previous page
     * * When undefined the item will not be included
     */
    renderPrevious?: ReactNode;
};
/**
 * Hook to generate an array of "pages"
 * @param props {@link UsePaginationProps}
 * @returns an array containing the "pages"
 */
export declare const usePagination: (props: UsePaginationProps) => {
    label: any;
    onClick: () => void;
    page: number;
    type: "page" | "nextPage" | "previousPage" | "firstPage" | "lastPage";
    disabled?: boolean;
    selected?: boolean;
}[];

type PaginationProps = UsePaginationProps & {
    /**
     * Method to define the "page" `href`
     */
    className?: string;
    /**
     * Defines custom styles for the ul, li, a.
     * * Note: Use @emotion/css to convert styles into a classname
     */
    customStyles?: CustomStyles;
    /**
     * Method to define the "page" `href`
     */
    getHref?: (page: number) => string;
};
/**
 * Pagination component
 */
export declare const Pagination: React.FC<PaginationProps>;