A tiny pagination range creator for your pagination UI.
npm i @simonsinclair/pgrconst { 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);[2, 3, 4, 5, 6, 7, 8];For example, pass a JSX Element as a callback.
<ol>
{pgr(totalPages, currentPage, PAGINATION_LENGTH, (pageNum) => (
<li key={pageNum}>
<button>{pageNum}</button>
</li>
))}
</ol>Returns an array of pages the specified length. pgr will attempt to center the array around the current page.
Type: number.
The total number of pages.
Type: number.
The current page.
Type: number.
The length of the pagination array.
Type: Function.
Default: (page) => page.
A function that is called on each page in the range.
IE11, and all modern browsers.