React.js is a JavaScript framework which is used for simplification of the front end development process. It works like jQuery or Angular. It has high demand in the programming marketplace. Let’s learn what pagination is from a naïve perspective. If there is no paging in a book you are reading it will be really difficult to identify the part you are reading later once you stopped reading and then come back to it. There was a time in olden days before 1500 c the books and documents used to be published without paging. In the digital world we divide documents into pages and these electronic pages are rendered in a web browser and they are called web pages. 

Instead of react.js pagination we also have progressive loading. Facebook, Instagram newsfeed have infinite scroll options and news feeds keep updating and bring as much information they can deliver to us. Pagination has its importance for example Google search engine shows only the most relevant data in its first page. React.js pagination is very important when a user is searching for particular content. Some inbuilt libraries and resources  help us to handle pagination directly in our application. Some NPM and other libraries are:

react-js-pagination
react-paginate
react-bootstrap/Pagination

You can use existing libraries for pagination and Instead of reinventing the same you can focus on other things.

getPager(totalItems, currentPage, pageSize) {

// default to first page

       currentPage = currentPage || 1;


       // default page size is 10

       pageSize = pageSize || 10;


       // calculate total pages

       var totalPages = Math.ceil(totalItems / pageSize);


       var startPage, endPage;

       if (totalPages <= 10) {

           // less than 10 total pages so show all

           startPage = 1;

           endPage = totalPages;

       } else {

           // more than 10 total pages so calculate start and end pages

           if (currentPage <= 6) {

               startPage = 1;

               endPage = 10;

           } else if (currentPage + 4 >= totalPages) {

               startPage = totalPages - 9;

               endPage = totalPages;

           } else {

               startPage = currentPage - 5;

               endPage = currentPage + 4;

           }

       }



       // calculate start and end item indexes

       var startIndex = (currentPage - 1) * pageSize;

       var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);



       // create an array of pages to ng-repeat in the pager control

       var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);


       // return an object with all pager properties required by the view

       return {

           totalItems: totalItems,

           currentPage: currentPage,

           pageSize: pageSize,

           totalPages: totalPages,

           startPage: startPage,

           endPage: endPage,

           startIndex: startIndex,

           endIndex: endIndex,

           pages: pages

       };

   }

Using this code we will try to understand the concepts.

Let’s assume that the current page is 1, page size is 10, total items 160.

Total pages to render=Math.ceil(160/10)=16;

Start page=1;

End page=10;

Assume current page=12, page size=10, total item=160;

Total pages to be rendered=Math.ceil(160/10)=16;

Current page =12 and still has to render a total 10 pages so the second condition is current page+4(12+4=16)>=total no of pages(16).

Start page=16-9=7

End page=16

Assume current page is 7, page size 10, total item=160;

Current page =7 still has to render a total 10 pages .third condition current page+4=(7+4=11)<=total no of pages(16).

Start page=11-5=6

Default value for the current page is 1, items per page are 10, page range is 5.

End page=11+4=15

import React, { Component } from "react";

importReactDOMfrom"react-dom";

importPaginationfrom"react-js-pagination";

require("bootstrap/less/bootstrap.less");

class App extends Component {

constructor(props) {

super(props);

this.state= {

     activePage:15

   };

 }

handlePageChange(pageNumber) {

   console.log(`active page is ${pageNumber}`);

this.setState({activePage: pageNumber});

 }

render() {

return (

<div>

<Pagination

         activePage={this.state.activePage}

         itemsCountPerPage={10}

         totalItemsCount={450}

         pageRangeDisplayed={5}

         onChange={::this.handlePageChange}

/>

</div>

   );

 }

}

ReactDOM.render(, document.getElementById("root")); The above code is taken from official NPM documentation of react-pagination. Many other packages are available.