How to use PAGINATION on React

To use pagination on the react app, there is this npm package called react-js-pagination which is very easy to use and effective as well.

Prerequisite
-Create-react-app
-Bootstrap

I won’t be teaching how to create react-app .

Install React-js-Pagination

Install with npm:

npm i react-js-pagination

OR Install with yarn:

yarn add react-js-pagination

Import Pagination

import Pagination from "react-js-pagination";

Setting Up Active Page

const [activePage, setActivePage] = useState(1);

Creating Pagination Component

<Pagination
activePage={activePage}
itemsCountPerPage={10}
totalItemsCount={data.count}
pageRangeDisplayed={5}
onChange={onChangePaginate}
innerClass="pagination"
itemClass="page-item"
activeLinkClass="page-link active"
linkClass="page-link"
prevPageText="Previous"
nextPageText="Next"
/>

setting onchange function

const onChangePaginate = (pageNumber) => {
setActivePage(pageNumber);
// to set offset
console.log(pageNumber * 10 - 10)
};

Visit React-JS-Pagination for more information.

--

--

--

I am a passionate Developer, been working in this field for more than 2 years. I have keen interest in Frontend Development and Flutter App Development.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Avoid regression by keeping your server and client code in sync

Virtualized Lists in React

Scaling Performance in Vue.js Applications

How to run the android app on your android phone using Android Studio?

How to export WordPress posts to Gatsby

The list of Markdown files outputted by the WordPress-to-Hugo exporter.

Getting started with Deno|Deno v/s Nodejs.

Node.js Working With Events and Event Emitter 03

How to read the balance of your MetaMask wallet with web3.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dipen Maharjan

Dipen Maharjan

I am a passionate Developer, been working in this field for more than 2 years. I have keen interest in Frontend Development and Flutter App Development.

More from Medium

REACT Form Validation with FORMIK

Run localhost on https in React App

React Js — Create column-level Filter

How to use React Router Dom v6