Skip to main content
The <HitsPerPage> component displays a dropdown to change the number of results displayed per page.

​
Import

import { HitsPerPage } from 'react-instantsearch';

​
Props

​
items
Array<{ label: string; value: number; default?: boolean }>
required
The items to display in the dropdown.
<HitsPerPage
  items={[
    { label: '10 hits per page', value: 10 },
    { label: '20 hits per page', value: 20, default: true },
    { label: '50 hits per page', value: 50 },
  ]}
/>
​
transformItems
function
Transform the items before displaying them.
<HitsPerPage
  items={[
    { label: '10', value: 10 },
    { label: '20', value: 20, default: true },
  ]}
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      label: `${item.value} results`,
    }))
  }
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

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

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

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <HitsPerPage
        items={[
          { label: '10 hits per page', value: 10 },
          { label: '20 hits per page', value: 20, default: true },
          { label: '50 hits per page', value: 50 },
          { label: '100 hits per page', value: 100 },
        ]}
      />
      <Hits />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us