Pagination

Generate an array with page numbers, with null values to indicate gaps.

Motivation

Whenever you need this, there's probably a deeper issue with the design you're implementing. Nevertheless: when you must add pagination to your application, it's nice to have something ready on the shelf.

Installation

yarn add @kaliber/pagination

Usage

Be sure to checkout the /example folder, it has an accessible example. getPagination only provides the bare bones data needed to render a pagination. It's up to you to make sure it's accessible. If you're not sure how, check out the example folder for an implementation based on this article: Accessible Pagination .

import { getPagination } from '@kaliber/pagination'

function Component({ currentPage, maxPages }) {
  const pagination = getPagination({ 
    current: currentPage, 
    max: maxPages, 
    padding: 2 
  })
  
  return (
    <nav>
      {pagination.map(x => x
        ? <a href={`?page=${x}`}>{x}</a>
        : <span>…</span>
      )}
    </nav>
  )
}

🚨 Gotcha: This library is designed to output a static number of pagination items. You should keep that in mind when displaying arrows alongside the pagination: don't hide them, but disable them instead.

Reference

getPagination accepts 1 option object as argument, with 3 required properties:

| Argument | Type | Description | |---|---|---| | current | number | The current page | | max | number | The maximum number of pages | | padding | number | A positive integer, which states at least how many numbers there should be next to the current number. There could be shown more numbers, if any gaps can be swapped with numbers to continue the number sequence |

Example: a padding of 1

1 ... 4 5 6 ... 12
^     ^   ^     ^
|     |   |     |
|     |   |     Always shown
|     Padding of 1
Always shown

The function returns an array with gaps denoted by a null value:

console.log(getPagination({ current: 5, max: 11, padding: 2 })) 
// => [1, null, 3, 4, 5, 6, 7, null, 11]

console.log(getPagination({ current: 2, max: 11, padding: 2 })) 
// => [1, 2, 3, 4, 5, 6, 7, null, 11]

console.log(getPagination({ current: 2, max: 5, padding: 1 })) 
// => [1, 2, 3, 4, 5]

Disclaimer

This library is intended for internal use, we provide no support, use at your own risk. It does not import React, but expects it to be provided, which @kaliber/build can handle for you.

This library is not transpiled.