@kaliber/pagination v1.0.1

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:

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.