Skip to main content

Pagination

The pagination component is used to indicate a series of related content exists across multiple views/pages.

Table of contents

Default

This is the default pagination.

Page 1

Visible range

Customize the range of pages to be displayed in the middle. e.g. visibleRange={5}

Page 7

Implementation

bpk-component-pagination

Backpack pagination component.

Installation

npm install bpk-component-pagination --save-dev

Usage

import React from 'react';
import BpkPagination from 'bpk-component-pagination';

const Pagination = () => (
  <BpkPagination
    pageCount={20}
    selectedPageIndex={0}
    onPageChange={pageIndex => alert(`page ${pageIndex + 1}`)}
    previousLabel="previous"
    nextLabel="next"
    visibleRange={3}
    pageLabel={(page, isSelected) => `page ${page}`}
  />
);

Props

PropertyPropTypeRequiredDefault Value
pageCountnumbertrue-
selectedPageIndexnumbertrue-
previousLabelstringtrue-
nextLabelstringtrue-
paginationLabelstringtrue-
pageLabelfunctrue-
onPageChangefuncfalsenull
visibleRangenumberfalse3
classNamestringfalsenull

Theme Props

  • buttonSecondaryTextColor
  • buttonSecondaryHoverTextColor
  • buttonSecondaryActiveTextColor
  • buttonSecondaryBorderColor
  • buttonSecondaryHoverBorderColor
  • buttonSecondaryActiveBorderColor
  • buttonSecondaryBackgroundColor
  • buttonSecondaryHoverBackgroundColor
  • buttonSecondaryActiveBackgroundColor
  • paginationNudgerActiveColor
  • paginationNudgerColor
  • paginationNudgerHoverColor
  • paginationSelectedBackgroundColor