DEV Community

Dipen Maharjan
Dipen Maharjan

Posted on

How to use PAGINATION on React

#javascript #react #tutorial #html

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
Enter fullscreen mode Exit fullscreen mode

OR Install with yarn:

yarn add react-js-pagination
Enter fullscreen mode Exit fullscreen mode

Import Pagination 

import Pagination from "react-js-pagination";
Enter fullscreen mode Exit fullscreen mode

Setting Up Active Page 

const [activePage, setActivePage] = useState(1);
Enter fullscreen mode Exit fullscreen mode

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"
/>
Enter fullscreen mode Exit fullscreen mode

setting onchange function 

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

Visit React-JS-Pagination for more information.

Top comments (0)

Read next

andrewdejackson profile image

Tiiny Host Alternatives: Why Static.app is Better

Andrew Jackson -

lovestaco profile image

From Lama2 to LiveAPI: Building Super-Convenient API Documentation (Part II)

Athreya aka Maneshwar -

shahidkhans profile image

Free and Opensource Invoice Generator App with Next.js, TypeScript, and ShadCN

Shahid -

joodi profile image

Learn Zustand Right Now in the Simplest Way!

Joodi -