@commercetools-uikit/pagination

Pagination

Description

Components for navigating through pages of items

Installation

yarn add @commercetools-uikit/pagination

npm --save install @commercetools-uikit/pagination

Additionally install the peer dependencies (if not present)

yarn add react react-intl

npm --save install react react-intl

Usage

import React from 'react';
import { Pagination } from '@commercetools-uikit/pagination';

const Example = () => {
  const items = [{ id: '1' }, { id: '2' }];
  return (
    <Pagination
      totalItems={items.length}
      page={1}
      onPageChange={() => {}}
      onPerPageChange={() => {}}
    />
  );
};

export default Example;

Properties

Props	Type	Required	Default	Description
totalItems	number	✅		Total number of items across all pages
page	number	✅		The current page
onPageChange	func	✅		A callback function, called when the page is changed. Signature: (page: number) => void Signature: (page: number) => void
perPage	number		20	Number of items per page, according to the pre-defined range values.
perPageRange	enum Possible values: 's', 'm', 'l'		's'	Range of items per page. s: 20,50 m: 20,50,100 l: 200,500
onPerPageChange	func	✅		A callback function, called when perPage is changed. Signature: (nextPerPage: number) => void