HitsPerPage | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

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

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

A list of available options.

1
2
3
4
5
6
7
<HitsPerPage
  // ...
  items={[
    { value: 5, label: 'Show 5 hits' },
    { value: 10, label: 'Show 10 hits' },
  ]}
/>

defaultRefinement

The number of selected items by default.

1
2
3
4
<HitsPerPage
  // ...
  defaultRefinement={5}
/>

transformItems

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

1
2
3
4
5
6
7
8
9
<HitsPerPage
  // ...
  transformItems={
    items => items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>