Never Push to Master

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

    3.0.3 • Public • Published

    Build Status



    A ReactJS dumb component to render a pagination.

    The component comes with no built-in styles. HTML layout compatible with Bootstrap 3 pagination stylesheets.

    If you would like it to work for Bootstrap 4, you will need to add 2 additional props when using this component:



    Install react-js-pagination with npm:

    $ npm install react-js-pagination


    Very easy to use. Just provide props with total amount of things that you want to display on the page.

    import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import Pagination from "react-js-pagination";
    class App extends Component {
      constructor(props) {
        this.state = {
          activePage: 15
      handlePageChange(pageNumber) {
        console.log(`active page is ${pageNumber}`);
        this.setState({activePage: pageNumber});
      render() {
        return (
    ReactDOM.render(<App />, document.getElementById("root"));

    Check Live example



    Name Type Default Description
    totalItemsCount Number Required. Total count of items which you are going to display
    onChange Function Required. Page change handler. Receive pageNumber as arg
    activePage Number 1 Required. Active page
    itemsCountPerPage Number 10 Count of items per page
    pageRangeDisplayed Number 5 Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages)
    prevPageText String / ReactElement Text of prev page navigation button
    firstPageText String / ReactElement « Text of first page navigation button
    lastPageText String / ReactElement » Text of last page navigation button
    nextPageText String / ReactElement Text of next page navigation button
    getPageUrl Function Generate href attribute for page
    innerClass String pagination Class name of <ul> tag
    activeClass String active Class name of active <li> tag
    activeLinkClass String Class name of active <a> tag
    itemClass String Default class of the <li> tag
    itemClassFirst String Class of the first <li> tag
    itemClassPrev String Class of the previous <li> tag
    itemClassNext String Class of the next <li> tag
    itemClassLast String Class of the last <li> tag
    disabledClass String disabled Class name of the first, previous, next and last <li> tags when disabled
    hideDisabled Boolean false Hide navigation buttons (prev, next, first, last) if they are disabled.
    hideNavigation Boolean false Hide navigation buttons (prev page, next page)
    hideFirstLastPages Boolean false Hide first/last navigation buttons
    linkClass String Default class of the <a> tag
    linkClassFirst String Class of the first <a> tag
    linkClassPrev String Class of the previous <a> tag
    linkClassNext String Class of the next <a> tag
    linkClassLast String Class of the last <a> tag


    npm i react-js-pagination

    DownloadsWeekly Downloads






    Unpacked Size

    3.78 MB

    Total Files


    Last publish


    • vayser
    • wagoid