Pagination | React InstantSearch V6 (Deprecated)

Signature

<Pagination
  // Optional parameters
  defaultRefinement={number}
  showFirst={boolean}
  showPrevious={boolean}
  showNext={boolean}
  showLast={boolean}
  padding={number}
  totalPages={number}
  translations={object}
/>

About this widget

The Pagination widget displays a pagination system allowing the user to change the current page.

The Algolia search engine limits paginating to 1,000 hits per page.

Examples

1
2
3
import { Pagination } from 'react-instantsearch-dom';

<Pagination />

Props

defaultRefinement

The value of the page selected by default.

1
<Pagination defaultRefinement={2} />

showFirst

Whether to display the first page link.

1
<Pagination showFirst={false} />

showPrevious

Whether to display the previous page link.

1
<Pagination showPrevious={false} />

showNext

Whether to display the next page link.

1
<Pagination showNext={false} />

showLast

Whether to display the last page link.

1
<Pagination showLast />

padding

How many page links to display around the current page.

1
<Pagination padding={5} />

totalPages

The maximum number of pages to display (and to allow navigating to).

1
<Pagination totalPages={10} />

translations

A mapping of keys to translation values.

• previous: the label value for the previous page link.
• next: the label value for the next page link.
• first: the label value for the first page link.
• last: the label value for the last page link.
• page: the label value for a page item. It also accepts a function with the current page.
• ariaPrevious: the accessibility label value for the previous page link.
• ariaNext: the accessibility label value for the previous page link.
• ariaFirst: the accessibility label value for the first page link.
• ariaLast: the accessibility label value for the previous page link.
• ariaPage: the accessibility label value for a page item. It also accepts a function with the current page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Pagination
  translations={{
    previous: '‹',
    next: '›',
    first: '«',
    last: '»',
    page(currentRefinement) {
      return currentRefinement;
    },
    ariaPrevious: 'Previous page',
    ariaNext: 'Next page',
    ariaFirst: 'First page',
    ariaLast: 'Last page',
    ariaPage(currentRefinement) {
      return `Page ${currentRefinement}`;
    },
  }}
/>