How to make Pagination in React JS 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.
- React App
- Install npm Package
- Creating the UI part
- Using Hooks
- Getting and Displaying the data from API
- Creating the Pagination component
Let’s start ….
Creating our React App
We can very easily create our React App with the following command.
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.