Useful and easy helper to create pagination components.

• Instalation
• Usage
• Types
• API Reference
• Examples

$ npm install any-pagination

or

$ yarn add any-pagination

import { paginate } from "any-pagination";

const pages = paginate({
  total: 100,
  perPage: 5,
  currentPage: 1,
});

// the output array:

[1, 2, 3, 0, 18, 19, 20];

// now, you can make your custom pagination component using the output array

The output array indicates the structure of the pagination component, for example:

import { paginate } from "any-pagination";

const pages = paginate({
  total: 230,
  perPage: 10,
  currentPage: 15,
});

// [1,0,14,15,16,0,23]

The rendered pagination should have the following structure:

You are free to handle all the events, styles and behaviours of your component, the paginate helper only helps you to build the structure of your pagination component.

Output array:

number {n ∈ N} (1,2,3...∞) indicates a page number

zero (0) indicates the ellipsis separator, (...)

Any-Pagination was made with TypeScript ❤️ so, you can use the configuration types as you need:

import type { PaginationConfig } from "any-pagination";

const config: PaginationConfig;

• React
• Svelte
• Vue
• Angular