Pagination Component in React

Pagination Component in React

import React from "react";

function Pagination({ currentPage, totalPages, onPageChange }) {
  function getPageNumbers() {
    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
    if (currentPage <= 4) return [1, 2, 3, 4, 5, "...", totalPages];
    if (currentPage >= totalPages - 3) return [1, "...", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
    return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages];
  }

  const pages = getPageNumbers();

  return (
    <nav aria-label="Pagination">
      <ul className="pagination">
        <li>
          <button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1}>
            Prev
          </button>
        </li>
        {pages.map((p, i) => (
          <li key={i}>
            {p === "..." ? (
              <span aria-hidden="true">...</span>
            ) : (
              <button
                onClick={() => onPageChange(p)}
                aria-current={p === currentPage ? "page" : undefined}
                className={p === currentPage ? "active" : ""}
              >
                {p}
              </button>
            )}
          </li>
        ))}
        <li>
          <button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages}>
            Next
          </button>
        </li>
      </ul>
    </nav>
  );
}

Usage

function App() {
  const [page, setPage] = useState(1);
  const totalPages = 20;
  return (
    <>
      <DataList page={page} />
      <Pagination currentPage={page} totalPages={totalPages} onPageChange={setPage} />
    </>
  );
}

The Takeaway

React pagination: props (currentPage, totalPages, onPageChange), getPageNumbers with ellipsis logic, render buttons with active state and disabled prev/next, ARIA attributes for accessibility. Reusable component that any parent can use by passing the current page and a callback.