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.
Top comments (0)