React-Pagination-Toolkit

React Pagination Toolkit is a modern highly customizable component built to give developers full control over pagination in one component, without the need to have 2 components for pagination and page size selection.

Features include:

• Flexible pagination component
• The ability to include page size selection
• Fully customizable labels

Installation and usage

The easiest way to use react-pagination-toolkit is to install it from npm.

# yarn
yarn add react-pagination-toolkit

# npm
npm install react-pagination-toolkit

# pnpm
pnpm add react-pagination-toolkit

Then use it in your app:

import React, { useState } from 'react';
import { Pagination } from 'react-pagination-toolkit';

export default function App() {
  const [currentPage, setCurrentPage] = useState<number>(1);
  const totalItems = 150;

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <Pagination
        currentPage={currentPage}
        totalItems={totalItems}
        pageSize={pageSize}
        onPageChange={handlePageChange}
        onPageSizeChange={handlePageSizeChange}
        labels={first: "first", last:"last", pageSizeLabel: "Page size"}
      />
    </div>
  );
}

Props

Common props you may want to specify include:

• totalItems - the total number of items, based on which the total nummber of pages is calculated
• pageSize - the number of items to be displayed on each page
• onPageChange - subscribe to page change events
• currentPage - the currently selected page
• className - apply a className to the control
• disabled - disable the control
• showFirstLastButtons - shows the navigate to first and last pages buttons
• showPrevNextButtons - shows the navigate to previous and next pages buttons
• maxPageButtons - the maximum number of pages to be shown in the control
• showPageSizeSelectorLabel - shows/hides the label next to page size selection dropdown
• showTotalItems - shows/hides the total number of items
• showPageNumbers - shows/hides the page numbers
• showPageSizeOptions - shows/hides the page size selection
• onPageSizeChange - subscribe to page size change events
• pageSizeOptions - accepted page sizes for page size selection
• labels - custom labels for page size, items, first and last pages, previous and next pages

TypeScript

This component is developed using typescript and supports typescript out of the box, no need to install additional typings.

To Do / Future Enhancements

Planned Features

• Add more control over css classes
• Custom button renderers - Slot-based customization
• Unit testing
• Storybook documentation - Interactive component playground

License

MIT Licensed. Copyright (c) Bechara Murr 2026.