Pagination in React

React Paginate is a popular library used for pagination in React applications. It provides a simple and customizable way to add pagination to lists, tables, and other components that display large amounts of data. In this article, we will discuss the basics of React Paginate and how to use it in your application.

Install React Paginate

To use React Paginate, you need to install it as a dependency in your React application. You can do this using either npm or yarn.

npm install react-paginate --save

npm run demo

npm run serve

How to use React Pagination?

Once you have installed React Paginate, you can import it into your component and use it to render a pagination component. Here is an example of how to use React Paginate in a simple React application:

import React, { useState } from 'react';
import ReactPaginate from 'react-paginate';

function App() {
const [pageNumber, setPageNumber] = useState(0);

const handlePageClick = ({ selected }) => {
setPageNumber(selected);
};

return (
<div>
<h1>React Paginate Demo</h1>
<ul>
{Array.from({ length: 50 }).map((_, index) => (
<li key={index}>Item {index + 1}</li>
))}
</ul>
<ReactPaginate
pageCount={5}
pageRangeDisplayed={3}
marginPagesDisplayed={2}
onPageChange={handlePageClick}
containerClassName={'pagination'}
activeClassName={'active'}
initialPage={pageNumber}
/>
</div>
);
}

export default App;

Output:

IMAGE

Detailed Explanation

In this example, we create a simple list of items and render them on the page. We also import ReactPaginate from the react-paginate library and add it to the component.

The ReactPaginate component takes several props, including:

• pageCount: The total number of pages.
• pageRangeDisplayed: The number of page links to display in the pagination.
• marginPagesDisplayed: The number of page links to display on each side of the current page.
• onPageChange: A callback function that is called when a page is clicked.
• containerClassName: The class name to apply to the pagination container.
• activeClassName: The class name to apply to the active page link.
• initialPage: The initial page to display.

In this example, we use the useState hook to keep track of the current page number. We also define a handlePageClick function that updates the page number when a page link is clicked. Finally, we pass these values to the ReactPaginate component to render the pagination.

Customizing React Paginate

React Paginate provides several props that allow you to customize the appearance and behavior of the pagination. Here are some of the most commonly used props:

• marginPagesDisplayed: The number of pages to display at the beginning and end of the pagination.
• pageRangeDisplayed: The number of pages to display in the middle of the pagination.
• onPageChange: A callback function that is called when the user clicks on a page link.
• previousLabel: The label to display for the previous page link.
• nextLabel: The label to display for the next page link.
• breakLabel: The label to display for the page links that are not displayed.
• containerClassName: The class name to apply to the pagination container.
• activeClassName: The class name to apply to the active page link.

Props in React Paginate:

React Paginate provides several props that can be used to customize the pagination component. Here are some of the most commonly used props:

• pageCount: Specifies the total number of pages.
• initialPage: Specifies the initial page to be displayed.
• forcePage: Forces a specific page to be displayed.
• onPageChange: A callback function that is called when the user clicks on a page number.
• pageRangeDisplayed: Specifies the number of page links to display at once.
• marginPagesDisplayed: Specifies the number of pages to display before and after the current page.

Using Props in React Paginate:

Let’s take a look at an example of how to use some of these props in React Paginate:

import React, { useState } from 'react';
import ReactPaginate from 'react-paginate';

function App() {
const [currentPage, setCurrentPage] = useState(0);
const handlePageClick = (data) => {
setCurrentPage(data.selected);
};

return (
<div>
<ReactPaginate
pageCount={10}
initialPage={0}
forcePage={currentPage}
onPageChange={handlePageClick}
pageRangeDisplayed={5}
marginPagesDisplayed={2}
/>
</div>
);
}export default App;

In this example, we’re using the useState hook to keep track of the current page. The handlePageClick function is passed to the onPageChange prop. The pageCount prop is set to 10, which means that we have a total of 10 pages.

Conclusion:

In conclusion, pagination in react is an essential feature for displaying large data sets in a user-friendly manner. React Paginate is a popular library for implementing pagination in React applications, and it offers a simple and flexible API for customization. In this article, we covered the basics of React Paginate and how to use it in a React application. We also explored some of the customization options available, such as changing the number of pages displayed, styling the pagination links, and handling events. By using React Paginate, developers can implement pagination quickly and easily, improving the user experience of their applications.