Building Pagination in React with React Paginate
Tags: react, webdev, javascript, beginners
Published: 2023-04-10 11:30:00

# 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](https://www.npmjs.com/package/react-paginate) library to build our pagination features. You can install the library with the below command:

```bat
npm i react-paginate
```

Along with that, we will need some icons. For icons, I am using the [react-icons](https://react-icons.github.io/react-icons/) library. Install it with the below command:

```bat
npm install react-icons --save
```

# 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. 

```javascript
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
```

You can look for the comments for each import.

## Data

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

```javascript
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" ];
```

## useEffect and useState

Here are the states of our application.

```jsx
const [page, setPage] = useState(0);
const [filterData, setFilterData] = useState();
const n = 3
```

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.

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

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`.

```jsx
<ul>
{filterData && filterData.map((item, index) => <li>Item #{item}</li>)}
</ul>;
```

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

```jsx
<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>
  }
/>;
```


|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.

```css
.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;
}
```

# CodeSandbox

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

{% codesandbox react-pagination-92b4sj %}

# 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.