Building Pagination Components: rc-pagination vs react-js-pagination vs react-paginate

Adding pagination to a React app seems simple until you need to handle edge cases, custom styling, or specific state management. rc-pagination, react-js-pagination, and react-paginate all solve this problem, but they take different approaches to API design and extensibility. Let's look at how they handle real-world engineering challenges.

🛠️ API Design: Props and State Control

rc-pagination uses a controlled component pattern similar to Ant Design.

• You must pass current and total explicitly.
• It fires onChange when the page changes.
• Best for complex state sync.

// rc-pagination: Controlled API
<Pagination
  current={currentPage}
  total={totalItems}
  onChange={(page, pageSize) => handlePageChange(page)}
/>

react-js-pagination also uses a controlled pattern but with different prop names.

• Uses activePage instead of current.
• Requires itemsCountPerPage to calculate pages internally.
• Simpler but less flexible for dynamic page sizes.

// react-js-pagination: Controlled API
<Pagination
  activePage={currentPage}
  itemsCountPerPage={10}
  totalItemsCount={totalItems}
  onChange={(page) => handlePageChange(page)}
/>

react-paginate shifts the calculation burden to the developer.

• You pass pageCount (total pages) instead of total items.
• Uses onPageChange with an event object containing selected.
• Gives you full control over how page count is derived.

// react-paginate: Page Count API
<ReactPaginate
  pageCount={Math.ceil(totalItems / itemsPerPage)}
  onPageChange={(event) => handlePageChange(event.selected + 1)}
/>

🎨 Customization: Rendering and Styling

rc-pagination allows you to override every single node.

• The itemRender prop lets you define custom HTML for prev, next, and page links.
• Ideal for building completely custom UIs or matching strict design systems.

// rc-pagination: Custom Item Rendering
<Pagination
  itemRender={(page, type, originalElement) => {
    if (type === 'prev') return <button>Back</button>;
    if (type === 'next') return <button>Next</button>;
    return <a>{page}</a>;
  }}
/>

react-js-pagination relies on CSS classes for styling.

• You pass innerClass, itemClass, and activeClass to hook into CSS.
• Less flexible if you need to change the actual HTML structure.

// react-js-pagination: Class-based Styling
<Pagination
  innerClass="pagination"
  activeClass="active"
  itemClass="page-item"
/>

react-paginate uses a break view and margin pages configuration.

• You can control how many pages show near the start/end with marginPagesDisplayed.
• Uses breakLabel to handle ellipsis customization.
• Good balance between config and code.

// react-paginate: Break and Margin Config
<ReactPaginate
  marginPagesDisplayed={2}
  pageRangeDisplayed={5}
  breakLabel="..."
  activeClassName="selected"
/>

📦 Maintenance and Ecosystem Fit

rc-pagination is part of the react-component organization.

• It powers Ant Design's pagination, ensuring high reliability.
• Regularly updated to match modern React standards.
• Best if you want a "batteries-included" feel without the full Ant Design library.

// rc-pagination: Ecosystem
// Often used alongside other rc-* components
import Pagination from 'rc-pagination';

react-js-pagination has seen infrequent updates recently.

• The repository shows less activity compared to peers.
• Risk of technical debt if security patches or React version support lag.
• Suitable only for legacy maintenance.

// react-js-pagination: Legacy Warning
// Check npm last publish date before installing
import Pagination from 'react-js-pagination';

react-paginate is a community favorite for standalone needs.

• Focused solely on pagination logic without UI framework dependencies.
• Active issue tracking and regular maintenance.
• Safe choice for long-term projects outside of Ant Design.

// react-paginate: Standalone
// No heavy dependencies
import ReactPaginate from 'react-paginate';

📊 Summary: Key Differences

💡 The Big Picture

rc-pagination is the power user's choice 🔧. It gives you the most control over rendering and state, making it perfect for design systems or complex apps where pagination needs to look unique.

react-js-pagination is the legacy option 🕰️. It works, but the lack of recent activity makes it a risky choice for new greenfield projects. Stick to it only if you are maintaining an older app.

react-paginate is the balanced standard ⚖️. It abstracts the math just enough to be useful without locking you into a specific UI kit. It is the safest bet for most standard React applications.

Final Thought: All three libraries handle the core task of splitting data into pages. However, your choice should depend on how much control you need over the HTML structure and how much you value long-term library maintenance.