DEV Community

Cover image for Building Pagination in React with React Paginate
Suraj Vishwakarma for Documatic

Posted on

Building Pagination in React with React Paginate

Introduction

Pagination is a crucial component in any web application, as it allows for the efficient and seamless navigation of large amounts of data. In React, implementing pagination can be a challenge for developers, especially for those who are new to the framework. However, with the right understanding of React components and hooks, building pagination in React can be a straightforward process.

In this article, we will explore the steps involved in building a pagination system in React, from setting up the component structure to integrating it with your application's data. This guide will provide a comprehensive overview of the process and provide you with the knowledge and skills you need to build an effective and user-friendly pagination system.

We are going to look into the following topics in the article:

  • Installing Component
  • Understanding the react-paginate library with props
  • Data filtering for different page
  • Pagination
  • Conclusion

Now, let's get started.

Installing Library

We are going to use the react-paginate library to build our pagination features. You can install the library with the below command:

npm i react-paginate
Enter fullscreen mode Exit fullscreen mode

Along with that, we will need some icons. For icons, I am using the react-icons library. Install it with the below command:

npm install react-icons --save
Enter fullscreen mode Exit fullscreen mode

App.js

We are building an application that is going to have data in an array. We need to display only 3 data on each page(We can change as per requirement).

Let's start building them one by one.

Imports

Here are the imports that we will require for the component.

import ReactPaginate from "react-paginate"; // for pagination
import { AiFillLeftCircle, AiFillRightCircle } from "react-icons/ai"; // icons form react-icons
import { IconContext } from "react-icons"; // for customizing icons
import { useEffect, useState } from "react"; // useState for storing data and useEffect for changing data on click 
import "./styles.css"; // stylesheet
Enter fullscreen mode Exit fullscreen mode

You can look for the comments for each import.

Data

The data is simple, it's the letter of the alphabet in an array.

const data = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" ];
Enter fullscreen mode Exit fullscreen mode

useEffect and useState

Here are the states of our application.

const [page, setPage] = useState(0);
const [filterData, setFilterData] = useState();
const n = 3
Enter fullscreen mode Exit fullscreen mode

page: It is for storing the current page number for the pagination component

filterData: It is the data that will be shown after filtering data for each page.

n: It is the maximum number of items to show on a page.

Here is the code for the useEffect hook that we are using to filter data. The data will filter when the user change to a different page. On each page, there will be filtered data for displaying.

useEffect(() => {
  setFilterData(
    data.filter((item, index) => {
      return (index >= page * n) & (index < (page + 1) * n);
    })
  );
}, [page]);
Enter fullscreen mode Exit fullscreen mode

The return formula will return the item from the data array in an array with an index in the multiple of 3.

Return

In the return statement, at the top, we are displaying the filterData.

<ul>
{filterData && filterData.map((item, index) => <li>Item #{item}</li>)}
</ul>;
Enter fullscreen mode Exit fullscreen mode

Now, let's look into the ReactPaginate component. First, let's look at the code then I will explain each prop.

<ReactPaginate
  containerClassName={"pagination"}
  pageClassName={"page-item"}
  activeClassName={"active"}
  onPageChange={(event) => setPage(event.selected)}
  pageCount={Math.ceil(data.length / n)}
  breakLabel="..."
  previousLabel={
    <IconContext.Provider value={{ color: "#B8C1CC", size: "36px" }}>
      <AiFillLeftCircle />
    </IconContext.Provider>
  }
  nextLabel={
    <IconContext.Provider value={{ color: "#B8C1CC", size: "36px" }}>
      <AiFillRightCircle />
    </IconContext.Provider>
  }
/>;
Enter fullscreen mode Exit fullscreen mode
Props Description
containerClassName You can provide a class name for the container of the pagination component.
pageClassName It is for the class name for each page number.
activeClassName Classname of the active page.
onPageChange It is the function that will be triggered on changing page. In this, we are storing the page number in the page state. Also, it starts with 0 and the number in the component starts with 1.
pageCount It is a required prop. As the name suggests, it will display the number of pages. I have divided the length of the data by the number of each item on a page.
breakLabel The component will be displayed when there will be a break between pages. It is to show that there is more page in between.
previousLabel The icon component is used here for displaying the previous button.
nextLable Here it is for the next button.

CSS

Here is the CSS of each component used in the code.

.App {
  display: flex;
  font-family: sans-serif;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pagination {
  list-style: none;
  height: 31.5px;
  width: 31.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  cursor: pointer;
}

.active {
  background-color: #1e50ff;
  border-radius: 50%;
}

.page-item {
  list-style: none;
  padding: 2px 12px;
  height: 31.5px;
  width: 31.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}
Enter fullscreen mode Exit fullscreen mode

CodeSandbox

You can look into the complete code and the output of the project in the below codesandbox.

Conclusion

Building pagination in React is an important aspect of web development and can greatly enhance the user experience in navigating large amounts of data. By following the steps outlined in this article, you can easily implement pagination in your React application and provide your users with a smooth and efficient way to access the data they need.

I hope the articles have helped you in understanding the process of creating a pagination component in React. Thanks for reading the article.

Top comments (9)

Collapse
 
madhan_s profile image
Madhan S • Edited

Nice introduction to pagination and react-paginate.

Not regarding pagination, but one thing I would recommend is to use memoized values instead of derived state like filterData which is calculated every time page state changes.

const [page, setPage] = useState(0);
const filterData = useMemo(() => {
    return data.filter((item, index) => {
        return (index >= page * n) & (index < (page + 1) * n);
    })
}, [page])
Enter fullscreen mode Exit fullscreen mode

filterData is re-calculated only when page state changes. This prevent additional states and unnecessary re-renders.

Collapse
 
surajondev profile image
Suraj Vishwakarma

That's a good addition to the article. Thanks for it.

Collapse
 
fvasquezl profile image
fvasquezl
const filterData = useMemo(() => {
    return items.filter((item, index) => {
      return index < n * page && index >= n * (page - 1);
    });
  }, [items, page]);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sergeyleschev profile image
Sergey Leschev

Pagination is indeed an essential feature of any web application that deals with large amounts of data, and it is great to see how easy it can be to implement with React and tools like react-paginate.

One aspect of the article that I particularly liked was the usage of hooks such as useState and useEffect. These are powerful tools that allow developers to manage state and handle side effects easily in functional components, and your code examples highlight their usefulness.

I also appreciated the explanation of the different props available in the ReactPaginate component, which makes it easier to customize the component based on different requirements.

Collapse
 
mezieb profile image
Okoro chimezie bright

Great i love this components thanks for puting together👍

Collapse
 
surajondev profile image
Suraj Vishwakarma

Awesome, that you like it.

Collapse
 
mezieb profile image
Okoro chimezie bright

Yes i'm following you hahaha,please keep up the good work.

Collapse
 
muratcan profile image
Muratcan Şentürk

So simple and easy-to-read article! 🚀

Collapse
 
surajondev profile image
Suraj Vishwakarma

Awesome that you like it.