Skip to content

"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

Notifications You must be signed in to change notification settings

abinth11/use-page-bloom-npm-package

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>
  );
}

Contributing

We welcome contributions! Feel free to open issues and pull requests on our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Package link to npm registry: link

About

"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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published