Pagination

A versatile pagination component that provides both controlled and uncontrolled modes with extensive customization options.

Features

🎨 Fully customizable styling with Tailwind CSS
🔄 Controlled and uncontrolled modes
📱 Responsive design
♿ Accessible by default
🔧 Extensive configuration options
🔄 Server-side pagination support
🔁 Loop mode for infinite navigation
🎯 Custom boundaries and siblings

Usage

import { Pagination } from '@shakibdshy/react-pagination-pro';
 
function App() {
  return (
    <Pagination
      totalItems={100}
      defaultPageSize={10}
      onChange={({ currentPage, pageSize }) => {
        // Handle page change
      }}
    />
  );
}

Examples

Basic Usage

Basic Pagination

Simple pagination with default settings

Current Items: 10

function BasicExample() {
  const [currentItems, setCurrentItems] = useState(ITEMS.slice(0, 10));
 
  return (
    <Pagination
      totalItems={100}
      defaultPageSize={10}
      onChange={({ currentPage, pageSize }) => {
        const start = (currentPage - 1) * pageSize;
        const end = start + pageSize;
        setCurrentItems(ITEMS.slice(start, end));
      }}
    />
  );
}

API Reference

Props

Prop	Type	Default	Description
`totalItems`	`number`	Required	Total number of items to paginate
`defaultPageSize`	`number`	`10`	Number of items per page
`currentPage`	`number`	-	Current page number (controlled mode)
`defaultCurrentPage`	`number`	`1`	Initial page number (uncontrolled mode)
`pageSize`	`number`	-	Items per page (controlled mode)
`onChange`	`(info: PaginationInfo) => void`	-	Callback when page or size changes
`mode`	`'client' \| 'server'`	`'client'`	Pagination mode
`isDisabled`	`boolean`	`false`	Disable all pagination controls
`isDisabledPrevious`	`boolean`	`false`	Disable previous button
`isDisabledNext`	`boolean`	`false`	Disable next button
`isLoading`	`boolean`	`false`	Show loading state
`isLoop`	`boolean`	`false`	Enable infinite loop navigation
`boundaries`	`number`	`1`	Number of boundary pages
`siblingCount`	`number`	`1`	Number of sibling pages
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`variant`	`'solid' \| 'outline'`	`'solid'`	Button variant
`color`	`'primary' \| 'secondary'`	`'primary'`	Button color
`rounded`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Button border radius
`previousIcon`	`ReactNode`	`<ChevronLeft />`	Custom previous button icon
`nextIcon`	`ReactNode`	`<ChevronRight />`	Custom next button icon
`dots`	`ReactNode \| string`	`...`	Custom dots/ellipsis

Types

interface PaginationInfo {
  currentPage: number;
  pageSize: number;
  totalItems: number;
  totalPages: number;
  startIndex: number;
  endIndex: number;
  hasNextPage: boolean;
  hasPreviousPage: boolean;
}
 
interface PaginationProps extends React.ComponentProps<'div'> {
  // ... all props listed above
}

Features

Usage

Examples

Basic Usage

Basic Pagination

API Reference

Props

Types

On this page