Widgets Pagination

Description

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

Props

showFirst
type: booleandefault: true

Display the first page link.

showLast
type: booleandefault: false

Display the last page link.

showPrevious
type: booleandefault: true

Display the previous page link.

showNext
type: booleandefault: true

Display the next page link.

padding
type: numberdefault: 3

How many page links to display around the current page.

totalPages
type: numberdefault: Infinity

Maximum number of pages to display.

Example usage

import React from 'react'; import { InstantSearch, Pagination } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <Pagination /> </InstantSearch> );

CSS classes

.ais-Pagination {}

the root div of the widget

.ais-Pagination--noRefinement {}

the root div of the widget when there is no refinement

.ais-Pagination-list {}

the list of all pagination items

.ais-Pagination-list--noRefinement {}

the list of all pagination items when there is no refinement

.ais-Pagination-item {}

the pagination list item

.ais-Pagination-item--firstPage {}

the “first” pagination list item

.ais-Pagination-item--lastPage {}

the “last” pagination list item

.ais-Pagination-item--previousPage {}

the “previous” pagination list item

.ais-Pagination-item--nextPage {}

the “next” pagination list item

.ais-Pagination-item--page {}

the “page” pagination list item

.ais-Pagination-item--selected {}

the selected pagination list item

.ais-Pagination-item--disabled {}

the disabled pagination list item

.ais-Pagination-link {}

the pagination clickable element

Translation keys

previous

Label value for the previous page link

next

Label value for the next page link

first

Label value for the first page link

last

Label value for the last page link

page

Label value for a page item. You get function(currentRefinement) and you need to return a string

ariaPrevious

Accessibility label value for the previous page link

ariaNext

Accessibility label value for the next page link

ariaFirst

Accessibility label value for the first page link

ariaLast

Accessibility label value for the last page link

ariaPage

Accessibility label value for a page item. You get function(currentRefinement) and you need to return a string