Skip to main content
The InfiniteHits connector provides the logic to build a custom widget that displays search results with infinite scrolling.

​
Usage

import { connectInfiniteHits } from 'instantsearch.js/es/connectors';

const customInfiniteHits = connectInfiniteHits(
  (renderOptions, isFirstRender) => {
    const { items, showMore, isLastPage, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <div class="hits">
        ${items.map(item => `
          <div class="hit">
            <h3>${item.name}</h3>
          </div>
        `).join('')}
      </div>
      ${!isLastPage ? '<button id="load-more">Load more</button>' : ''}
    `;
    
    if (!isLastPage) {
      container.querySelector('#load-more').addEventListener('click', showMore);
    }
  }
);

search.addWidgets([
  customInfiniteHits({
    container: document.querySelector('#infinite-hits'),
  }),
]);

​
Connector Options

​
escapeHTML
boolean
default:"true"
Whether to escape HTML tags from hits string values.
​
showPrevious
boolean
default:"false"
Enable the button to load previous results.
​
transformItems
(items: object[]) => object[]
Function to transform the items passed to the templates.
​
cache
object
Reads and writes hits from/to cache. Helps restore InfiniteHits and scroll position when users navigate back from a product page.Must implement read and write methods:
  • read({ state }): object | null
  • write({ state, hits }): void

​
Render Options

​
items
Array<Hit>
The accumulated hits for current and cached pages.
​
hits
Array<Hit>
The accumulated hits for current and cached pages.
This parameter is deprecated. Use items instead.
​
currentPageHits
Array<Hit>
The hits for the current page only.
​
results
SearchResults
The complete response from the Algolia API.
​
banner
Banner
The banner to display above the hits.
​
showMore
() => void
Loads the next page of hits.
​
showPrevious
() => void
Loads the previous results.
​
isFirstPage
boolean
Indicates whether the first page of hits has been reached.
​
isLastPage
boolean
Indicates whether the last page of hits has been reached.
​
sendEvent
(eventType: string, hits: object | object[], eventName?: string) => void
Sends an event to the Insights middleware.
​
bindEvent
(eventType: string, hits: object | object[], eventName?: string) => string
Returns a string for the data-insights-event attribute.
​
widgetParams
object
The options passed to the connector.