react-paginate: renderOnZeroPageCount missing on type

Using typescript here, when i add renderOnZeroPageCount the prop is not recognized

Screenshot 2021-11-16 at 15 51 12 d:

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 18 (2 by maintainers)

Commits related to this issue

Most upvoted comments

Nope, Typescript look for an index.d.ts in the package root by default. Yes, it works. Just to mention that, with the current type, the syntax is

renderOnZeroPageCount={() => null}

and not

renderOnZeroPageCount={null}

like showed in doc.

👌 I hadn’t rebuilt the demo.js file properly, sorry.

v8.0.2 is released.

The issue is probably related to https://github.com/DefinitelyTyped/DefinitelyTyped. Because the type definition installed from there doesn’t include that property at all:

/node_modules/@types/react-paginate/index.d.ts

// Type definitions for react-paginate 7.1
// Project: https://github.com/AdeleD/react-paginate
// Definitions by: Simon Hartcher <https://github.com/deevus>
//                 Wouter Hardeman <https://github.com/wouterhardeman>
//                 pegel03 <https://github.com/pegel03>
//                 Simon Archer <https://github.com/archy-bold>
//                 Yasunori Ohoka <https://github.com/yasupeke>
//                 Shingo Sato <https://github.com/sugarshin>
//                 SPWizard01 <https://github.com/SPWizard01>
//                 Kevin Rambaud <https://github.com/kevinrambaud>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8

import * as React from 'react';

export interface ReactPaginateProps {
    /**
     * The total number of pages.
     */
    pageCount: number;

    /**
     * The range of pages displayed.
     */
    pageRangeDisplayed: number;

    /**
     * The number of pages to display for margins.
     */
    marginPagesDisplayed: number;

    /**
     * Label for the `previous` button.
     */
    previousLabel?: React.ReactNode | undefined;

    /**
     * Label for the `next` button.
     */
    nextLabel?: React.ReactNode | undefined;

    /**
     * Label for ellipsis.
     */
    breakLabel?: string | React.ReactNode | undefined;

    /**
     * The classname on tag `li` of the ellipsis element.
     */
    breakClassName?: string | undefined;

    /**
     * The classname on tag `a` of the ellipsis element.
     */
    breakLinkClassName?: string | undefined;

    /**
     * The method to call when a page is clicked. Exposes the current page object as an argument.
     */
    onPageChange?(selectedItem: { selected: number }): void;

    /**
     * The method to call when an active page is clicked. Exposes the active page object as an argument.
     */
    onPageActive?(selectedItem: { selected: number }): void;

    /**
     * The initial page selected.
     */
    initialPage?: number | undefined;

    /**
     * To override selected page with parent prop.
     */
    forcePage?: number | undefined;

    /**
     * Disable onPageChange callback with initial page. Default: false
     */
    disableInitialCallback?: boolean | undefined;

    /**
     * The classname of the pagination container.
     */
    containerClassName?: string | undefined;

    /**
     * The classname on tag `li` of each page element.
     */
    pageClassName?: string | undefined;

    /**
     * The classname on tag `a` of each page element.
     */
    pageLinkClassName?: string | undefined;

    /**
     * Function to set the text on page links. Defaults to `(page) => page`
     */
    pageLabelBuilder?: ((page: number) => string) | undefined;

    /**
     * The classname for the active page.
     */
    activeClassName?: string | undefined;

    /**
     * The classname for the active link.
     */
    activeLinkClassName?: string | undefined;

    /**
     * The classname on tag `li` of the `previous` button.
     */
    previousClassName?: string | undefined;

    /**
     * The classname on tag `li` of the `next` button.
     */
    nextClassName?: string | undefined;

    /**
     * The classname on tag `a` of the `previous` button.
     */
    previousLinkClassName?: string | undefined;

    /**
     * The classname on tag `a` of the `next` button.
     */
    nextLinkClassName?: string | undefined;

    /**
     * The classname for disabled `previous` and `next` buttons.
     */
    disabledClassName?: string | undefined;

    /**
     * The method is called to generate the href attribute value on tag a of each page element.
     */
    hrefBuilder?(pageIndex: number): void;

    /**
     * @deprecated The extraAriaContext prop is deprecated. You should now use the ariaLabelBuilder instead.
     * Extra context to add to the aria-label HTML attribute.
     */
    extraAriaContext?: string | undefined;

    /**
     * The method is called to generate the `aria-label` attribute value on each page link
     */
    ariaLabelBuilder?: ((pageIndex: number, selected: boolean) => string) | undefined;

    /**
     * The event to listen onto before changing the selected page. Default is: "onClick".
     */
    eventListener?: string | undefined;
}

declare const ReactPaginate: React.ComponentClass<ReactPaginateProps>;
export default ReactPaginate;