How to use PAGINATION on React

Mar 6, 2022

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.