React Pagination Component - react-pagination-new

A simple and customizable pagination component for React applications. This package allows you to easily implement pagination in your React projects with configurable page numbers, active states, and page change handling.

Usage

You can now use the Pagination component in your React Application

Installation

To install the react-pagination-new package, you can use npm or yarn:

Using npm

npm install react-pagination-new

How to Use

You can now use the Pagination component in your React Application.

import { useState } from 'react';
import Pagination from 'react-pagination-new';

const YourComponent = () => {
    const itemsPerPage = 4;
    const [currentPage, setCurrentPage] = useState(1);

    // Assuming you have your data in `whole_data` (e.g., an array of items)
    const totalPages = Math.ceil(whole_data?.length / itemsPerPage);

    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    return (
        <div>
            {/* Render your items here */}
            <Pagination
                totalPages={totalPages}
                currentPage={currentPage}
                onPageChange={handlePageChange}
            />
        </div>
    );
};