Basic Usage

Simple Pagination

The most basic usage of the pagination component with default settings:

import { useState } from 'react';
import { Pagination } from '@shakibdshy/react-pagination-pro';
 
const ITEMS = Array.from({ length: 100 }, (_, i) => ({
  id: i + 1,
  title: `Item ${i + 1}`,
  description: `Description for item ${i + 1}`,
}));
 
function BasicExample() {
  const [currentItems, setCurrentItems] = useState(ITEMS.slice(0, 10));
 
  return (
    <div className="space-y-4">
      <div className="rounded-lg border p-4">
        <p>Current Items: {currentItems.length}</p>
      </div>
 
      <Pagination
        totalItems={ITEMS.length}
        defaultPageSize={10}
        onChange={({ currentPage, pageSize }) => {
          const start = (currentPage - 1) * pageSize;
          const end = start + pageSize;
          setCurrentItems(ITEMS.slice(start, end));
        }}
      />
    </div>
  );
}

Key Features

1. Simple Integration: Easy to integrate with just a few props
2. Default Styling: Comes with beautiful default styling using Tailwind CSS
3. Automatic Page Size: Handles page size calculations automatically
4. Controlled Updates: Get notified of page changes through the onChange callback

Props Explanation

• totalItems: The total number of items to paginate (required)
• defaultPageSize: Number of items to show per page (defaults to 10)
• onChange: Callback function that receives the current page state

Best Practices

1. State Management: Keep your items state in sync with pagination
2. Error Handling: Always validate your data and handle edge cases
3. Performance: Use appropriate page sizes to avoid performance issues
4. Accessibility: The component is accessible by default, maintain this in your implementation