abinth11 / use-page-bloom-npm-package Goto Github PK

View Code? Open in Web Editor NEW

"use-page-bloom" is a versatile and lightweight npm package tailored for implementing pagination functionality seamlessly within React applications. It simplifies the process of breaking down long lists or datasets into manageable, paginated sections, enhancing the user experience by optimizing content accessibility.

License: MIT License

TypeScript 100.00%

use-page-bloom-npm-package's Introduction

Introducing usePageBloom: Simplify Pagination in Your Application

`usePageBloom` is a customizable React package that provides pagination functionality and components for managing and displaying data in a paginated manner.

## Installation

To install the `usePageBloom` package, use the following command:

```bash
npm install use-page-bloom

Usage

Import the usePageBloom hook from the package and use it within your React components to enable pagination for your data.

import React from "react";
import usePageBloom from "use-page-bloom-hook";

function MyComponent({ data }) {
  const itemsPerPage = 10;
  const {
    currentPage,
    totalPages,
    currentData,
    goToPage,
    goToPreviousPage,
    goToNextPage,
  } = usePageBloom(data, itemsPerPage);

  return (
    <div>
      {/* Render your paginated data */}
    </div>
  );
}

API

The usePageBloom hook returns an object with the following properties and methods:

currentPage: number: The current active page.
totalPages: number: The total number of pages based on the provided data and itemsPerPage.
currentData: T[]: The data to display on the current page.
goToPage(page: number): Function to navigate to a specific page.
goToPreviousPage(): Function to navigate to the previous page.
goToNextPage(): Function to navigate to the next page.

Example

function MyComponent({ data }) {
  const itemsPerPage = 5;
  const pagination = usePageBloom(data, itemsPerPage);

  return (
    <div>
      {/* Render your paginated data */}
      {pagination.currentData.map((item, index) => (
        <div key={index}>{item}</div>
      ))}

      {/* Render pagination controls */}
      <button onClick={pagination.goToPreviousPage}>Previous</button>
      <button onClick={pagination.goToNextPage}>Next</button>
    </div>
  );
}