Wondering what’s next for npm?Check out our public roadmap! »

    react-paginate
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-paginate package

    7.1.3 • Public • Published

    react-paginate

    NPM Build Status

    A ReactJS component to render a pagination.

    By installing this component and writing only a little bit of CSS you can obtain this:

    Pagination demo 2

    or

    Pagination demo 1

    Installation

    Install react-paginate with npm:

    npm install react-paginate --save
    

    For CommonJS users:

    import ReactPaginate from 'react-paginate';

    Read the code of demo/js/demo.js. You will quickly understand how to make react-paginate work with a list of objects.

    Demo

    Clone the repository and move into:

    git clone git@github.com:AdeleD/react-paginate.git
    cd react-paginate

    Install dependencies:

    make install

    Prepare the demo:

    make demo

    Run the server:

    make serve

    Open your browser and go to http://localhost:3000/

    Pagination demo

    Props

    Name Type Description
    pageCount Number Required. The total number of pages.
    pageRangeDisplayed Number Required. The range of pages displayed.
    marginPagesDisplayed Number Required. The number of pages to display for margins.
    previousLabel Node Label for the previous button.
    nextLabel Node Label for the next button.
    breakLabel Node Label for ellipsis.
    breakClassName String The classname on tag li of the ellipsis element.
    breakLinkClassName String The classname on tag a of the ellipsis element.
    onPageChange Function The method to call when a page is clicked. Exposes the current page object as an argument.
    onPageActive Function The method to call when an active page is clicked. Exposes the active page object as an argument.
    initialPage Number The initial page selected.
    forcePage Number To override selected page with parent prop.
    disableInitialCallback boolean Disable onPageChange callback with initial page. Default: false
    containerClassName String The classname of the pagination container.
    pageClassName String The classname on tag li of each page element.
    pageLinkClassName String The classname on tag a of each page element.
    pageLabelBuilder Function Function to set the text on page links. Defaults to (page) => page
    activeClassName String The classname for the active page.
    activeLinkClassName String The classname on the active tag a.
    previousClassName String The classname on tag li of the previous button.
    nextClassName String The classname on tag li of the next button.
    previousLinkClassName String The classname on tag a of the previous button.
    nextLinkClassName String The classname on tag a of the next button.
    disabledClassName String The classname for disabled previous and next buttons.
    hrefBuilder Function The method is called to generate the href attribute value on tag a of each page element.
    extraAriaContext String DEPRECATED: Extra context to add to the aria-label HTML attribute.
    ariaLabelBuilder Function The method is called to generate the aria-label attribute value on each page link
    eventListener String The event to listen onto before changing the selected page. Default is: "onClick".

    Contribute

    1. Submit an issue
    2. Fork the repository
    3. Create a dedicated branch (never ever work in master)
    4. The first time, run command: webpack into the directory
    5. Run npm start
    6. Fix bugs or implement features
    7. Always write tests

    Run tests:

    make test

    Install

    npm i react-paginate

    DownloadsWeekly Downloads

    224,035

    Version

    7.1.3

    License

    MIT

    Unpacked Size

    313 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar