Skip to main content
The Hits connector provides the logic to build a custom widget that displays search results.

​
Usage

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

const customHits = connectHits(
  (renderOptions, isFirstRender) => {
    const { items, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <div class="hits">
        ${items.map(item => `
          <div class="hit">
            <h3>${item.name}</h3>
            <p>${item.description}</p>
          </div>
        `).join('')}
      </div>
    `;
  }
);

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

​
Connector Options

​
escapeHTML
boolean
default:"true"
Whether to escape HTML tags from hits string values.
​
transformItems
(items: object[]) => object[]
Function to transform the items passed to the templates.
transformItems(items) {
  return items.map(item => ({
    ...item,
    title: item.name.toUpperCase(),
  }));
}

​
Render Options

​
items
Array<Hit>
The matched hits from the Algolia API.
​
hits
Array<Hit>
The matched hits from the Algolia API.
This parameter is deprecated. Use items instead.
​
results
SearchResults
The complete response from the Algolia API.
​
banner
Banner
The banner to display above the hits.
​
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 for the Insights middleware.
​
widgetParams
object
The options passed to the connector.