InstantSearch / React / V6 / API reference

HitsPerPage | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

Signature 
<HitsPerPage
  items={object[]}
  defaultRefinement={number}
  // Optional parameters
  transformItems={function}
/>

About this widget

The HitsPerPage widget displays a select element to let the user change the number of displayed hits.

If you only want to configure the number of hits per page without displaying a widget, you should use the configure widget with the hitsPerPage search parameter.

Examples

Copy 
1
2
3
4
5
6
7
8
9

import { HitsPerPage } from 'react-instantsearch-dom';

<HitsPerPage
  defaultRefinement={5}
  items={[
    { value: 5, label: 'Show 5 hits' },
    { value: 10, label: 'Show 10 hits' },
  ]}
/>

Props

items

Required
Type: object[]

A list of available options.

Copy 
1
2
3
4
5
6
7

<HitsPerPage
  // ...
  items={[
    { value: 5, label: 'Show 5 hits' },
    { value: 10, label: 'Show 10 hits' },
  ]}
/>

defaultRefinement

Required
Type: number

The number of selected items by default.

Copy 
1
2
3
4

<HitsPerPage
  // ...
  defaultRefinement={5}
/>

transformItems

Optional
Type: function

Modifies the items being displayed, for example, to filter or sort them. It takes items as argument and expects them back in return.

Copy 
1
2
3
4
5
6
7
8
9

<HitsPerPage
  // ...
  transformItems={
    items => items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>
Did you find this page helpful?