How to make Pagination in React JS using React-Paginate

React Pagination using REact-Paginate

Pagination is a conventional concept of distributing the data in pages with an equal number of posts.

It reduces the load on the DOM Tree, and also the efficiency of our Application remains unchanged.

We can very easily create our own React Pagination with React Hooks. Both ways have their advantages and limitations but let’s not come to that and start building our Pagination Component using React Paginate.

Index

1. React App
2. Install npm Package
3. Creating the UI part
4. Using Hooks
5. Getting and Displaying the data from API
6. Creating the Pagination component

Let’s start ….

Creating our React App

We can very easily create our React App with the following command.

create-react-app react-pagination

For this to work, you should have npm and node installed in your system and then navigate using the cd command to the folder where you want to create your react app.

We will be using bootstrap for this project with its CDN link for CSS and JS Bundle. You can use the npm package React-Bootstrap also.

Installing our Package

The package we will be using is React-Pacginate which can be installed by typing the following in our command prompt under the name of our Application or in Powershell

npm install react-paginate

And writing the below line in our App.js file

import ReactPaginate from ‘react-paginate’;

Creating the table for our data

Click here for the full article.