renderOnZeroPageCount missing on type

[equinusocio]

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

d:

[MonsieurV]

Hi @equinusocio,

The prop is defined in

react-paginate/react_components/PaginationBoxView.js

Line 48 in d41cb4d

renderOnZeroPageCount: PropTypes.func,

, like the others

Which version of the library do you use?

[equinusocio]

8.0.0

[MonsieurV]

It should be there:

https://github.com/AdeleD/react-paginate/blob/v8.0.0/react_components/PaginationBoxView.js#L48

Do you have any pointer to know why a prop would not be recognized by TypeScript?

[MonsieurV]

See

Inferring PropTypes in TypeScript
in https://amanhimself.dev/blog/prop-types-in-react-and-typescript/

Does this help? Could you create a sample repository in GitHub to reproduce this error?

I'm not familiar with TypeScript

[equinusocio]

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;

[romanpastu]

same issue

[MonsieurV]

Ok, thanks @equinusocio.

So seems like this pulls the types from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-paginate, which is a community repo containing types for many libs. They are type definitions defined and supported here.

You can read the CHANGELOG to update and provide the up to date definitions in their index.d.ts and update the test, then submit it as a PR.

Do any of you are up to this task?

We could also publish a @types/react-paginate directly, but this would be one package to maintain (and many of us here are not TypeScript users).

[equinusocio]

If you can just add an index.d.ts file in the package (something like this) we don't need DefinitelyTyped anymore.

Even without using Typescript, puttin that file on the package root dist should solve the issue. You should keep it updated as well

[MonsieurV]

If you can just add an index.d.ts file in the package (something like this) we don't need DefinitelyTyped anymore.

Even without using Typescript, puttin that file on the package root dist should solve the issue. You should keep it updated as well

Done.

I can't certify we will always think to update these definitions. (but then a PR will do)

Not sure on the parameter for renderOnZeroPageCount: we pass the props of the ReactPaginate component itself (so this is kind of recursive for the definitions). See:

react-paginate/react_components/PaginationBoxView.js

Line 464 in 91ad937

? renderOnZeroPageCount(this.props)

Can someone with TS test the setup works?

npm install --save github:AdeleD/react-paginate

[equinusocio]

Yes, it works. But you have to move the index.d.ts file up by one level (outside the dist folder). It should be inside the package root (which you distribute with another dist/ folder inside).

So:

[MonsieurV]

Can you re-check now @equinusocio?

npm install --save github:AdeleD/react-paginate

We don't have to declare this file anywhere? (like in package.json)

[equinusocio]

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.

[MonsieurV]

This now should be possible

bac1a6e

@equinusocio can you check one last time?

[equinusocio]

Yes it works

[MonsieurV]

Thanks.

@AdeleD we could release https://github.com/AdeleD/react-paginate/releases/tag/v8.0.2

[AdeleD]

@MonsieurV The CSS of the demo seems to be broken on my side. See:

Maybe an issue with styled-component?

[MonsieurV]

@AdeleD I've committed everything

Maybe as I changed quite a bit, ensure you do not get from cache (Bootstrap version is changed) and that you have npm install (added styled-components for dev)

You should have something like that:

[AdeleD]

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

v8.0.2 is released.