Implementing React-Paginate A Complete Guide

The Reactjs pagination library will be used directly for the pagination functionality of any list of items. The props required here are an array of list items to render and an onChange callback function, which informs the parent component about the page change.

But pagination is important by filtering and displaying only relevant data, for example, Google search engine.

Therefore, Reactjs pagination becomes crucial when users search for certain information and do not consume random information.

Some built-in libraries are used to handle pagination in web development, in the case of React. You directly use many resources to handle pagination in the application.Backward Skip 10sPlay VideoForward Skip 10s

Some of the NPM and other pagination libraries available are:

• react-js-paginate
• react-paginate
• react-boot/paginate

Instead of rewriting your own, it’s ideal to use these existing libraries, as there’s no need to reinvent the wheel; instead, you can focus on other things.

But at the same time, it is very important to know what is going on behind the scenes to build and customize the app to your needs without compromising any requirements.

There is also a possibility that different logic is used for different reactjs pagination packages. To implement react pagination in your app, read this excellent react-jw-pagination article.

Here we talk only about react-paginate (the second one):

A ReactJS component to render the pagination.

By installing the component and writing just a bit of CSS, you can get this: Note: You must write your CSS to get this UI. This package does not provide any CSS.

or

Installation

1. Install the react page with npm:  
2. npm install react-page –save  
3. import React, { useEffect, useState } from ‘react’;  
4. import ReactDOM from ‘react-dom’;  
5. import ReactPaginate from ‘react-paginate’;  
6. // Example to simulate obtaining the resources.  
7. constant elements = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];  
8.   
9. Function elements ({current elements}) {  
10.       return (  
11.         <>  
12.           {current items &&  
13.             currentelements.map((element) => (            <div>  
14.               <h3>Article #{article}</h3>  
15.             </div>  
16.           ))}  
17.       </>  
18.     );  
19. }function Paginated Items ({ items per page }) {  
20.   // We start with an empty list of elements.  
21.   const [currentitems, setcurrentitems] = useState(null);  
22.     const [pageCount, setPageCount] = useState(0);  
23.     // element offsets; we also use as page scrolls  
24.     // API we are working with.  
25.     const [element offset, set Element Offset] = usestate(0);  
26.   
27.     useEffect(() => {    // Get the items of other resources.  
28.     const endOffset = itemOffset + itemsPerPage;  
29.     console.log(`Loading items from ${itemOffset} to ${endOffset}`);  
30.     setCurrentItems(items.slice(itemOffset, endOffset));  
31.     setPageCount(Math.ceil(items.length / itemsPerPage));  
32.   }, [element offset, elements per page]);  
33.   
34.   // Call user clicks to request another page.  
35.   const handlePageClick = (event) => {  
36.     const newOffset = (event.selected * itemsPerPage) % items.length;  
37.     console.log(  
38.       `User requested page number ${event.selected}, offset by ${newOffset}`  
39.     );  
40.     setItemOffset(newOffset);  
41.   };  
42.   return (  
43.     <>  
44.       <articles current articles={current articles} />  
45.       <ReactPaginate  
46.         breakLabel=”…”  
47.         nextLabel=”next >”  
48.         onPageChange={handlePageClick}  
49.         Displayed Page Range = {5}  
50.         pageCount={pageCount}  
51.         previousLabel=”< previous”  
52.         renderOnZeroPageCount={null}  
53.       />  
54.     </>  
55.   );  
56. }  
57. // Add a <div id=”container”> to HTML to see the component.  
58. ReactDOM.render(  
59.   <Items Paginated itemsPerPage={4} />,  
60.   document.getElementById(‘container’)  
61. );  

Try it on Code Pen.

You can read the code in demo/js/demo.js to understand make reactive pagination work in a list of objects.

Finally, the CodePen demo introduces getting the sample code (GitHub API) and two synchronized widgets of pagination.

Props

Demo

Clone the repository and access it easily to run the demo:

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

Install the dependencies:

1. install npm  

Prepare the demo:

1. npm run demo  

Run the server:

1. npm run serve  

Open the browser and go to http://localhost:3000/.

Here we implement a pagination element in React app by using the react-paginate.

Let’s start

Add and install react-paginate on a dependency in the app.

1. $ npm install react-page –save  

State Definition

currentPage is index of the page selected by user, you may want to set it to 0, ie. the first page.

Data contains all data elements. It is empty and we fill it after we get the data.

1. const [CurrentPage, setCurrentPage] = useState(0);  
2. const [data, setData] = useState([]);  
3. Getting the data  
4. useEffect(() => {  
5.     get information();  
6.   }, []); function fetchdata() {  
7.     search(“https://ihsavru.me/Demo/uploads.json”)  
8.       .then((res) => res.json())  
9.       .then((data) => {  
10.         constant {  
11.           course: {loads}  
12.         } = data;  
13.         setData(loads);  
14.       });  
15.   }  

Here, we create a useEffect hook by an empty dependency array that functions as the DidMount component’s lifecycle method and is responsible for getting the data and updating the data state.

Calculation of data to represent the current page.

Let’s first define some constants:

1. const PER_PAGE = 10; const offset = current page * BY_PAGE; const current page data = data  
2.     .slice(offset, offset + BY_PAGE)  
3.     .map(({ thumburl }) => <img src={thumburl} />);const pageCount = Math.ceil(data.length / PER_PAGE);  

The PER_PAGE constant contains the number of items to display on each page, and an offset is the number of items that is already been displayed on previous pages.

If the current page is two (or the third page indexing starts by 0), then the offset becomes 20. It means that the first 20 elements have been rendered, and we will start rendering the next elements after 20 (the first page yielded the first ten items, 2nd the page yielded the next 10). The third page will render items 20 to 20 + BY_PAGE, 30.

This offset is used to set the current page elements, ie the current page data, which is mapped to an array of images using the split data.

let’s render the component:

1. return (  
2.     <div className=”Application”>  
3.       <h1>React pagination example</h1>  
4.       <ReactPaginate  
5.         previousLabel={“? Previous”}  
6.         nextLabel={“Next ?”}  
7.         pageCount={pageCount}  
8.         onPageChange={handlePageClick}  
9.         containerClassName={“paging”}  
10.         previouslinkClassName={“paging__link”}  
11.         nextLinkClassName={“paging__link”}  
12.         disabledClassName={“paging__link–disabled”}  
13.         activeClassName={“paging__link–active”}  
14.       />  
15.       {current page data}  
16.     </div>  
17.   );  

You can refer to this to see the different types of props passed to ReactPaginate.

When a new page is clicked here, a handlePageClick event handler function sets the current page.

1. function handlePageClick ({selected: selectedpage}) {  
2.       setCurrentPage(selectedpage);  
3. }