InstantSearch / React / V6 / API reference

InfiniteHits | 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
<InfiniteHits
  // Optional parameters
  showPrevious={boolean}
  hitComponent={function}
  translations={object}
  cache={object}
/>

About this widget

The infiniteHits widget displays a list of results with a “Show more” button at the bottom of the list. As an alternative to this approach, the infinite scroll guide describes how to create an automatically-scrolling infinite hits experience.

To configure the number of retrieved hits, use the HitsPerPage widget or pass the hitsPerPage prop to a Configure widget.

If there are no hits, you should display a message to users and clear filters so they can start over.

Examples

1
2
3
import { InfiniteHits } from 'react-instantsearch-dom';

<InfiniteHits />

Props

showPrevious

Optional
Type: boolean

Enable the button to load previous results.

The button is only used if URL Sync is implemented and the user isn’t on the first page. Override this behavior with connectors.

1
<InfiniteHits showPrevious />

hitComponent

Optional
Type: function

Renders each hit from the results. If not provided, the rendering defaults to displaying the hit in JSON format. The provided component is called with a hit prop.

1
2
3
const Hit = ({ hit }) => <p>{hit.name}</p>;

<InfiniteHits hitComponent={Hit} />

translations

Optional
Type: object

A mapping of keys to translation values.

  • loadPrevious: the label for the “Load previous” button.
  • loadMore: the label for the “Load more” button.
1
2
3
4
5
6
7
<InfiniteHits
  // ...
  translations={{
    loadPrevious: "Load previous",
    loadMore: 'Load more',
  }}
/>

cache

Optional
Type: object

The widget caches all loaded hits. By default, it uses its own internal in-memory cache implementation. Alternatively, use sessionStorage to retain the cache even if users reload the page.

You can also implement your own cache object with read and write methods.

1
2
3
4
5
6
7
8
9
10
11
import {
  createInfiniteHitsSessionStorageCache,
  InfiniteHits,
} from 'react-instantsearch-dom';

const sessionStorageCache = createInfiniteHitsSessionStorageCache();

<InfiniteHits
  // ...
  cache={sessionStorageCache}
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const customCache = {
  read({ state }) {
    const { cachedKey, cachedHits } = // read from your cache
    const currentKey = convertStateToKey(state);
    if (isEqual(cachedKey, currentKey)) {
      return cachedHits;
    } else {
      return null;
    }
  },
  write({ state, hits }) {
    const currentKey = convertStateToKey(state);
    // write in your cache
  },
}

function isEqual(obj1, obj2) {
  // perform deep equal
}

function convertStateToKey(state) {
  const { page, ...rest } = state || {};
  // Regardless of the `page`,
  // check if the rest of the state is the same.
  return rest;
}

<InfiniteHits
  // ...
  cache={customCache}
/>
Did you find this page helpful?