API Reference / React InstantSearch Widgets / InfiniteHits
Apr. 11, 2019

InfiniteHits

Widget signature
<InfiniteHits
  // Optional parameters
  hitComponent={function}
  translations={object}
/>

About this widget

The InfiniteHits is used to display an infinite list of results with a “Load more” button. To create an infinite scroll experience, take a look at the infinite scroll guide.

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

Examples

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

<InfiniteHits />

Props

hitComponent
type: function
Optional

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

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

<InfiniteHits hitComponent={Hit} />
translations
type: object
Optional

A mapping of keys to translation values.

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

Customize the UI - connectInfiniteHits

If you want to create your own UI of the InfiniteHits widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

It’s a 3-step process:

// 1. Create a React component
const InfiniteHits = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomInfiniteHits = connectInfiniteHits(InfiniteHits);

// 3. Use your connected widget
<CustomInfiniteHits />

Create a React component

const InfiniteHits = ({
  object[] hits,
  boolean hasMore,
  function refine,
}) => {
  // return the DOM output
};

Provided Props

hits
type: object[]

The hits that matched the search request.

1
2
3
4
5
6
7
const InfiniteHits = ({ hits }) => (
  <ol>
    {hits.map(hit => (
      <li key={hit.objectID}>{hit.name}</li>
    ))}
  </ol>
);
hasMore
type: boolean

Whether there are more pages to load.

1
2
3
4
5
6
7
8
const InfiniteHits = ({ hits, hasMore, refine }) => (
  <div>
    nbHits: {hits.length}
    <button onClick={refine} disabled={!hasMore}>
      Show more
    </button>
  </div>
);
refine
type: function

Loads more results.

1
2
3
4
5
6
7
8
9
10
const InfiniteHits = ({ hits, refine }) => (
  <div>
    <ol>
      {hits.map(hit => (
        <li key={hit.objectID}>{hit.name}</li>
      ))}
    </ol>
    <button onClick={refine}>Show more</button>
  </div>
);

Create and instantiate your connected widget

const CustomInfiniteHits = connectInfiniteHits(InfiniteHits);

<CustomInfiniteHits />

Full example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { connectInfiniteHits } from 'react-instantsearch-dom';

const InfiniteHits = ({ hits, hasMore, refine }) => (
  <div>
    <ol>
      {hits.map(hit => (
        <li key={hit.objectID}>{hit.name}</li>
      ))}
    </ol>
    <button disabled={!hasMore} onClick={refine}>
      Show more
    </button>
  </div>
);

const CustomInfiniteHits = connectInfiniteHits(InfiniteHits);

HTML output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="ais-InfiniteHits">
  <ol class="ais-InfiniteHits-list">
    <li class="ais-InfiniteHits-item">
      ...
    </li>
    <li class="ais-InfiniteHits-item">
      ...
    </li>
    <li class="ais-InfiniteHits-item">
      ...
    </li>
  </ol>
  <button class="ais-InfiniteHits-loadMore">
    Load more
  </button>
</div>

Did you find this page helpful?