Build A Custom Pagination Component In Reactjs From Scratch

Understanding Pagination Logic from Scratch

Before writing any React code, it’s important to clearly understand the logic that powers pagination. Once the logic is solid, implementing it in React becomes straightforward.

Calculating Total Pages

const itemsPerPage = 5;
const totalItems = data.length;

const totalPages = Math.ceil(totalItems / itemsPerPage);

The Math.ceil() function ensures that any remaining items still get their own page instead of being ignored.

Managing Pagination State in React

Now that we understand the logic behind pagination, it’s time to bring that logic to life using React. State management plays a crucial role here, as pagination is inherently dynamic and user-driven.

Tracking the Current Page

import { useState } from "react";

const [currentPage, setCurrentPage] = useState(1);

We initialize the page to 1 because pagination usually starts from the first page. Each interaction updates this state.

Displaying Data for the Active Page

Once we know the current page, we need to determine which items from the dataset should be displayed. This is done using simple index calculations and array slicing.

const itemsPerPage = 5;

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;

const currentItems = data.slice(
  indexOfFirstItem,
  indexOfLastItem
);

This approach ensures that only the relevant subset of data is rendered on the page, keeping the UI fast and responsive.

Building an Interactive Pagination UI

Now that the logic and state management are in place, it’s time to build the pagination interface. This is the part users interact with directly, so clarity, accessibility, and feedback are extremely important.

Generating Page Numbers Dynamically

Page numbers should be generated based on the total number of pages, ensuring flexibility regardless of dataset size.

const pages = Array.from(
  { length: totalPages },
  (_, index) => index + 1
);

This approach dynamically creates page numbers starting from 1 up to the total number of pages.

Rendering Pagination Buttons

<div className="flex items-center gap-2">
  {pages.map((page) => (
    <button
      key={page}
      onClick={() => setCurrentPage(page)}
      className={
        page === currentPage
          ? "bg-primary text-white"
          : "bg-transparent"
      }
    >
      {page}
    </button>
  ))}
</div>

Clicking a page number updates the state, triggering a re-render and displaying the corresponding data.

Previous & Next Buttons

<button
  onClick={() => setCurrentPage((prev) => prev - 1)}
  disabled={currentPage === 1}
>
  Previous
</button>

<button
  onClick={() => setCurrentPage((prev) => prev + 1)}
  disabled={currentPage === totalPages}
>
  Next
</button>

Disabling navigation buttons when users reach the beginning or end prevents invalid page navigation.

Taking Pagination to Production Level

A pagination component isn’t truly complete until it’s accessible, performant, and adaptable to real-world scenarios. In this final section, we’ll focus on polishing the component so it’s ready for production use.

Improving Accessibility (A11y)

Accessibility ensures that your pagination component can be used by everyone, including users who rely on keyboards or screen readers.

• Use semantic button elements
• Add aria-label attributes
• Ensure proper focus styles for keyboard navigation

<button
  aria-label="Go to page 2"
  onClick={() => setCurrentPage(2)}
>
  2
</button>

Performance Considerations

Pagination significantly improves performance by limiting how many elements are rendered at a time. However, there are additional steps you can take to optimize further.

Real-World Enhancements

Once the basics are implemented, you can enhance your pagination component with advanced features:

• Sync page number with URL query parameters
• Add smooth scroll-to-top on page change
• Animate page transitions using Framer Motion
• Display ellipsis for large page ranges