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

griseduardo profile image

Testes e2e em React com Cypress

Eduardo Henrique Gris -

jaber1028 profile image

Landing Your First CS Internship: A Strategic Guide

Jacob aberasturi -

mywillandprobate profile image

Navigating inheritance disputes: Why you need estate planning solicitors in London

My Will And Probate -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -