npm install react-paginate

React Pagination Using react-paginate

npm install react-paginate

import { useState } from "react";
import ReactPaginate from "react-paginate";
function Users() {
 const users = [
   "John",
   "Sam",
   "David",
   "Alex",
   "Tom",
   "Rahul",
   "Aman",
   "Vikas",
   "Neha",
   "Pooja",
 ];
 const itemsPerPage = 3;
 const [itemOffset, setItemOffset] = useState(0);
 // Current items
 const endOffset = itemOffset + itemsPerPage;
 const currentItems = users.slice(
   itemOffset,
   endOffset
 );
 // Total pages
 const pageCount = Math.ceil(
   users.length / itemsPerPage
 );
 // Page Change
 const handlePageClick = (event) => {
   const newOffset =
     (event.selected * itemsPerPage) %
     users.length;
   setItemOffset(newOffset);
 };
 return (
   <div className="container mt-4">
     <h2>User List</h2>
     <ul className="list-group mb-3">
       {currentItems.map((user, index) => (
         <li
           key={index}
           className="list-group-item"
         >
           {user}
         </li>
       ))}
     </ul>
     {/* Pagination */}
     <ReactPaginate
       breakLabel="..."
       nextLabel="Next >"
       previousLabel="< Prev"
       onPageChange={handlePageClick}
       pageCount={pageCount}
       marginPagesDisplayed={2}
       pageRangeDisplayed={3}
       containerClassName="pagination"
       pageClassName="page-item"
       pageLinkClassName="page-link"
       previousClassName="page-item"
       previousLinkClassName="page-link"
       nextClassName="page-item"
       nextLinkClassName="page-link"
       activeClassName="active"
     />
   </div>
 );
}
export default Users;

FAQs