https://github.com/simonsinclair/pgr
A tiny pagination range creator for your pagination UI.
https://github.com/simonsinclair/pgr
jsx pager paginate pagination paginator paging react typescript vue
Last synced: 8 months ago
JSON representation
A tiny pagination range creator for your pagination UI.
- Host: GitHub
- URL: https://github.com/simonsinclair/pgr
- Owner: simonsinclair
- License: mit
- Created: 2021-05-21T23:04:36.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-12T13:17:50.000Z (over 4 years ago)
- Last Synced: 2024-12-06T21:06:16.031Z (10 months ago)
- Topics: jsx, pager, paginate, pagination, paginator, paging, react, typescript, vue
- Language: TypeScript
- Homepage: https://github.com/simonsinclair/pgr
- Size: 438 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pgr
> A tiny pagination range creator for your pagination UI.
## Install
```sh
npm i @simonsinclair/pgr
```
## Usage
```js
const { default: pgr } = require('@simonsinclair/pgr');
const ARTICLES_PER_PAGE = 20;
const PAGINATION_LENGTH = 7;
const articles = [
{ title: 'Article 1' },
{ title: 'Article 2' },
// ...
];
const totalPages = Math.ceil(articles.length / ARTICLES_PER_PAGE);
const currentPage = 5;
const pagination = pgr(totalPages, currentPage, PAGINATION_LENGTH);
console.log(pagination);
```
```js
[2, 3, 4, 5, 6, 7, 8];
```
## Tips
### Using the callback parameter
For example, pass a JSX Element as a callback.
```jsx
{pgr(totalPages, currentPage, PAGINATION_LENGTH, (pageNum) => (
-
{pageNum}
))}
```
## API
### pgr(totalPages, currentPage, length, callback?)
Returns an array of pages the specified length. `pgr` will attempt to center the array around the current page.
#### totalPages
Type: `number`.
The total number of pages.
#### currentPage
Type: `number`.
The current page.
#### length
Type: `number`.
The length of the pagination array.
#### callback
Type: `Function`.
Default: `(page) => page`.
A function that is called on each page in the range.
## Supported browsers
IE11, and all modern browsers.