@shakibdshy/react-pagination-pro v1.1.2

React Pagination Pro

A powerful and flexible pagination library for React applications with both controlled and uncontrolled components, supporting client-side and server-side pagination.

Example Demo

Features

• 🚀 Modern React Hooks API
• 🎨 Highly customizable UI
• 🔄 Client & Server-side pagination
• 📱 Fully responsive
• 🎯 TypeScript support
• 🎨 Built with Tailwind CSS
• 🎭 Flexible styling with class-variance-authority
• 🔧 Controlled & Uncontrolled components

Installation

npm install @shakibdshy/react-pagination-pro
# or
yarn add @shakibdshy/react-pagination-pro
# or
pnpm add @shakibdshy/react-pagination-pro

Quick Start

Basic Usage

import { Pagination } from '@shakibdshy/react-pagination-pro';

function MyComponent() {
  return (
    <Pagination
      totalItems={100}
      defaultPageSize={10}
      onChange={({ currentPage, pageSize }) => {
        // Handle page change
      }}
    />
  );
}

Using the Hook (Custom UI)

import { usePagination } from '@shakibdshy/react-pagination-pro';

function CustomPagination() {
  const [
    { currentPage, totalPages, pageSize, startIndex, endIndex },
    actions
  ] = usePagination({
    totalItems: 100,
    defaultPageSize: 10
  });

  return (
    <div>
      <div>
        Showing {startIndex + 1} to {endIndex} of {totalItems} items
      </div>
      
      <div>
        <button onClick={actions.previousPage}>Previous</button>
        <span>Page {currentPage} of {totalPages}</span>
        <button onClick={actions.nextPage}>Next</button>
      </div>
    </div>
  );
}

API Reference

Pagination Component Props

usePagination Hook

const [state, actions] = usePagination(options);

Options

State

Actions

Accessibility

The pagination component is built with accessibility in mind:

• Full keyboard navigation support
• ARIA labels and roles for screen readers
• Proper tab indexing for interactive elements
• Disabled states properly communicated to assistive technologies
• Semantic HTML structure with navigation landmarks

Examples

Disabled States

import { Pagination } from '@shakibdshy/react-pagination-pro';

function DisabledExample() {
  return (
    <>
      {/* Fully disabled pagination */}
      <Pagination
        totalItems={100}
        defaultPageSize={10}
        isDisabled={true}
      />

      {/* Disable specific navigation buttons */}
      <Pagination
        totalItems={100}
        defaultPageSize={10}
        isDisabledPrevious={true} // Disable previous button
        isDisabledNext={true}     // Disable next button
      />
    </>
  );
}

Basic Usage with Boundaries

import { Pagination } from '@shakibdshy/react-pagination-pro';

function MyComponent() {
  return (
    <Pagination
      totalItems={100}
      defaultPageSize={10}
      // Show 2 pages at the start and end
      // Example: 1 2 ... 4 5 [6] 7 8 ... 9 10
      boundaries={2}
      // Show 2 siblings on each side of current page
      siblingCount={2}
      onChange={({ currentPage, pageSize }) => {
        // Handle page change
      }}
    />
  );
}

Client-side Pagination

import { Pagination } from '@shakibdshy/react-pagination-pro';

function ClientSidePagination() {
  const [items, setItems] = useState(allItems);
  
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
      
      <Pagination
        totalItems={allItems.length}
        defaultPageSize={10}
        onChange={({ currentPage, pageSize }) => {
          const start = (currentPage - 1) * pageSize;
          const end = start + pageSize;
          setItems(allItems.slice(start, end));
        }}
      />
    </div>
  );
}

Server-side Pagination

import { Pagination } from '@shakibdshy/react-pagination-pro';

function ServerSidePagination() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  
  const fetchItems = async (page: number, pageSize: number) => {
    setLoading(true);
    const data = await fetchFromAPI(page, pageSize);
    setItems(data.items);
    setLoading(false);
  };
  
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
      
      <Pagination
        totalItems={1000} // Total count from API
        defaultPageSize={10}
        mode="server"
        isLoading={loading}
        onPageChange={fetchItems}
      />
    </div>
  );
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Md Habibur Rahman