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
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
The matched hits from the Algolia API.
The matched hits from the Algolia API.This parameter is deprecated. Use items instead.
The complete response from the Algolia API.
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.
The options passed to the connector.