perfect-react-pagination

A lightweight, customizable React pagination component built with TypeScript and Tailwind CSS.

Installation

npm  install  perfect-react-pagination

Features

• 🎯 Simple and intuitive API

• 🎨 Fully customizable with Tailwind CSS

• 📱 Responsive and mobile-friendly

• 🔧 TypeScript support

• 🪶 Lightweight with zero dependencies

• 📖 Dynamic page spread for better UX

• ♿ Accessible pagination controls

Quick Start

1. Install the package:

npm  install  perfect-react-pagination

2. Use the component in your React application:

import React, { useState } from "react";

import { Pagination } from "perfect-react-pagination";

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;

  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={setCurrentPage}
      spread={1} // Optional: number of pages to show on each side
    />
  );
}

API Reference

PaginationProps

| Prop | Type | Required | Default | Description | | -------------- | ------------------------ | -------- | ------- | -------------------------------------------------------- | | currentPage | number | Yes | - | The current active page | | totalPages | number | Yes | - | Total number of pages | | onPageChange | (page: number) => void | Yes | - | Callback function when page changes | | spread | number | No | 1 | Number of pages to show on each side of the current page |

Examples

Basic Usage

<Pagination
  currentPage={1}
  totalPages={10}
  onPageChange={(page) => console.log(`Navigate to page ${page}`)}
/>

Custom Spread

<Pagination
  currentPage={5}
  totalPages={20}
  onPageChange={(page) => console.log(`Navigate to page ${page}`)}
  spread={2} // Shows more pages around the current page
/>

Contributing

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

License

MIT © Sarah_Mn

Support

If you find this component helpful, please ⭐️ the repository to help others discover it.