Skip to main content
The <Pagination> component displays pagination controls to navigate through search result pages.

​
Import

import { Pagination } from 'react-instantsearch';

​
Props

​
padding
number
default:"3"
Number of page buttons to display on each side of the current page.
<Pagination padding={2} />
​
totalPages
number
Maximum number of pages to display.
<Pagination totalPages={20} />
​
showFirst
boolean
default:"true"
Whether to display the “First” button.
<Pagination showFirst={false} />
​
showPrevious
boolean
default:"true"
Whether to display the “Previous” button.
<Pagination showPrevious={false} />
​
showNext
boolean
default:"true"
Whether to display the “Next” button.
<Pagination showNext={false} />
​
showLast
boolean
default:"true"
Whether to display the “Last” button.
<Pagination showLast={false} />
​
translations
object
Customize the text strings.
<Pagination
  translations={{
    firstPageItemText: 'First',
    previousPageItemText: 'Previous',
    nextPageItemText: 'Next',
    lastPageItemText: 'Last',
    pageItemText: ({ currentPage }) => `${currentPage}`,
    firstPageItemAriaLabel: 'First Page',
    previousPageItemAriaLabel: 'Previous Page',
    nextPageItemAriaLabel: 'Next Page',
    lastPageItemAriaLabel: 'Last Page',
    pageItemAriaLabel: ({ currentPage }) => `Page ${currentPage}`,
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, SearchBox, Hits, Pagination } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <Hits />
      <Pagination />
    </InstantSearch>
  );
}

​
Minimal Pagination

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Hits />
      <Pagination
        showFirst={false}
        showLast={false}
        padding={2}
      />
    </InstantSearch>
  );
}