react-pagination-kit

A customizable pagination component for React.

Table of Contents

• Description
• Features
• Installation
• Usage
  • Basic Usage
  • Props
  • Example with Customization
• Development
• License

Description

react-pagination-kit is a lightweight, customizable pagination component for React that allows developers to efficiently implement paginated navigation for large datasets.

• Simple to use and easy to integrate.
• Fully customizable via props, including custom "Next" and "Previous" buttons.
• Option for dynamically changing the number of items per page.
• Can accept custom CSS classes and styles.
• No external dependencies.

Features

• Customizable Pagination Controls: Supports text, icons, or HTML for "Next" and "Previous" buttons.
• Responsive Design: Adjusts based on the number of items per page and total pages.
• Custom Styling: You can override default styles with your own classes or inline styles.
• Dropdown for Items per Page: Allows users to select how many items they want to see per page.
• No Dependencies: The component is lightweight and only relies on React.

Installation

You can install react-pagination-kit using npm:

npm install react-pagination-kit

## Usage

You can import and use the `Pagination` component in your React project like this:

### Example

```jsx
import React, { useState } from 'react';
import Pagination from 'react-pagination-kit';

const App = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(5);
  const totalPages = 10; // Total number of pages

  // Handle page change
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  // Handle items per page change
  const handleItemsPerPageChange = (items) => {
    setItemsPerPage(items);
  };

  return (
    <div>
      <h1>Pagination Example</h1>

      {/* Your data display here */}
      <p>Showing page {currentPage} of {totalPages} pages</p>

      {/* Pagination component */}
      <Pagination
        totalPages={totalPages}
        currentPage={currentPage}
        onPageChange={handlePageChange}
        itemsPerPage={itemsPerPage}
        onItemsPerPageChange={handleItemsPerPageChange}
        itemsPerPageOptions={[5, 10, 15]}  // Options for items per page
      />
    </div>
  );
};

export default App;


### Component Props

| Prop                        | Type                            | Description                                                                                       |
| --------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------- |
| `totalPages`                 | `number`                        | Total number of pages to display.                                                                 |
| `currentPage`                | `number`                        | The current page number.                                                                           |
| `onPageChange`               | `function`                      | Callback function triggered when a page is selected. Receives the new page number as an argument. |
| `itemsPerPageOptions`        | `array[number]`                 | Array of options for the number of items per page. Defaults to `[5, 10, 15]`.                      |
| `itemsPerPage`               | `number`                        | The number of items per page.                                                                     |
| `onItemsPerPageChange`       | `function`                      | Callback function triggered when items per page is changed. Receives the new number of items as an argument. |
| `customClasses`              | `object`                        | Custom class names for different parts of the pagination component.                             |
| `customStyles`               | `object`                        | Custom inline styles for different parts of the pagination component.                            |
| `nextText`                   | `string` or `node`              | Custom text or component to render for the next button. Defaults to `"Next"`.                     |
| `previousText`               | `string` or `node`              | Custom text or component to render for the previous button. Defaults to `"Previous"`.             |
| `showPaginationControls`     | `boolean`                       | Boolean to show/hide pagination controls. Defaults to `true`.                                     |

### Example of Customization

You can customize the appearance of the pagination component using the `customClasses` and `customStyles` props.

```jsx
<Pagination
  totalPages={10}
  currentPage={1}
  onPageChange={(page) => console.log(page)}
  itemsPerPage={5}
  onItemsPerPageChange={(items) => console.log(items)}
  customClasses={{
    container: "my-custom-container",
    pagination: "my-custom-pagination",
    prevButton: "my-custom-prev-button",
    nextButton: "my-custom-next-button",
  }}
  customStyles={{
    container: { padding: "20px", backgroundColor: "#f0f0f0" },
    prevButton: { backgroundColor: "#ccc", color: "#333" },
    nextButton: { backgroundColor: "#ccc", color: "#333" },
  }}
/>