https://github.com/hassanheydarinasab/react-hyper-pagination

It's useful when you have a cursor-based pagination from the back-end that loads many items in each page and you want to slice each page into smaller pages on the front-end.
https://github.com/hassanheydarinasab/react-hyper-pagination

cursor-pagination react react-pagination

Last synced: 22 days ago
JSON representation

It's useful when you have a cursor-based pagination from the back-end that loads many items in each page and you want to slice each page into smaller pages on the front-end.

• Host: GitHub
• URL: https://github.com/hassanheydarinasab/react-hyper-pagination
• Owner: HassanHeydariNasab
• Created: 2023-12-17T14:38:02.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-27T18:37:33.000Z (over 1 year ago)
• Last Synced: 2025-04-28T17:54:03.819Z (about 1 month ago)
• Topics: cursor-pagination, react, react-pagination
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-hyper-pagination
• Size: 174 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React hooks for pagination

## Install

```bash

npm i react-hyper-pagination

```

## Usage

In this package, there are some hooks for pagination:

1. `useAfterKeyPagiantion`

   It works with "after key" and it's a cursor-based pagination. It's useful when you need to load more data after the end of a list. For example, you have a list of messages in a chat and you need to load more messages when you scroll to the top of the list. Or you have to use a cursor-based pagination and you want to go to the next or previous pages.

   - Fetch a new page when `afterKey` changes.

   - Call `onAfterKeyReceived` when you receive the new `afterKey` from the back-end.

2. `useSlicePagination`

   If you have a list of items you want to slice into pages, you can use this hook. It's useful when you have all data on the client side and you want to slice it into pages.

3. `useHyperPagination`

   It combines `useAfterKeyPagiantion` and `useSlicePagination`. It's useful when you have a cursor-based pagination from the back-end that loads many items in pages and you want to slice the data into small pages on the front-end.

   - Fetch a new super page (cursor-based pagination) when `superAfterKey` changes.

   - Call `superOnAfterKeyReceived` and `setSuperItems` when you receive the new `afterKey` and "items" from the back-end.

   - Show `microCurrentPageItems` to the user.

## TODO

- [ ] Add `useOffsetLimitPagination`

- [ ] Add some examples for the hooks

## License

WTFPL