Skip to main content
The <InfiniteHits> component displays search results with infinite scrolling or “Show more” functionality.

​
Import

import { InfiniteHits } from 'react-instantsearch';

​
Props

​
hitComponent
React.Component
Custom component to render each search result.
<InfiniteHits
  hitComponent={({ hit, sendEvent }) => (
    <div>
      <h2>{hit.name}</h2>
      <p>{hit.description}</p>
    </div>
  )}
/>
​
showPrevious
boolean
default:"true"
Whether to display the “Show previous” button when loading from a page beyond the first.
<InfiniteHits showPrevious={false} />
​
cache
object
Cache implementation to prevent duplicates.
import { createInfiniteHitsSessionStorageCache } from 'instantsearch.js/es/lib/infiniteHitsCache';

<InfiniteHits cache={createInfiniteHitsSessionStorageCache()} />
​
escapeHTML
boolean
default:"true"
Whether to escape HTML in the results.
<InfiniteHits escapeHTML={false} />
​
transformItems
function
Transform the hits before displaying them.
<InfiniteHits
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      name: item.name.toUpperCase(),
    }))
  }
/>
​
bannerComponent
React.Component | false
Component to render a banner. Set to false to disable.
<InfiniteHits
  bannerComponent={({ banner, className }) => (
    <div className={className}>
      <img src={banner.image.url} alt={banner.image.title} />
    </div>
  )}
/>
​
translations
object
Customize the text strings.
<InfiniteHits
  translations={{
    showPreviousButtonText: 'Load previous',
    showMoreButtonText: 'Load more',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, SearchBox, InfiniteHits, Highlight } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

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

function Hit({ hit }) {
  return (
    <article>
      <img src={hit.image} alt={hit.name} />
      <h1>
        <Highlight hit={hit} attribute="name" />
      </h1>
      <p>${hit.price}</p>
    </article>
  );
}

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <InfiniteHits hitComponent={Hit} />
    </InstantSearch>
  );
}

​
With Session Storage Cache

import { createInfiniteHitsSessionStorageCache } from 'instantsearch.js/es/lib/infiniteHitsCache';

const sessionStorageCache = createInfiniteHitsSessionStorageCache();

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <InfiniteHits
        hitComponent={Hit}
        cache={sessionStorageCache}
      />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us