Hoe PAGINATION op React te gebruiken?

Om paginering in de react-app te gebruiken, is er dit npm-pakket met de naam react-js-pagination, dat heel gemakkelijk te gebruiken en ook effectief is.

Eerste vereiste
-Maak-reageer-app
-Bootstrap

Ik zal niet leren hoe je een react-app maakt.

Installeer React-js-Pagination

Installeren met npm:

npm i react-js-pagination

OF Installeren met garen:

yarn add react-js-pagination

Paginering importeren

import Pagination from "react-js-pagination";

Actieve pagina instellen

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

Pagineringcomponent maken

<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"
/>

instelling aanwijzig functie

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

Bezoek React-JS-Pagination voor meer informatie.