connectors connectHits

Edit this page

Description

Hits connector provides the logic to create custom widgets that will render the results retrieved from Algolia.

Usage

Usage
const search= instantsearch(/* parameters */);

const makeHits= instantsearch.connectors.connectHits(
function renderFn(
renderOpts: HitsRenderingOptions,
isFirstRendering: boolean) {
// render the custom Hits widget
} );

const customHits = makeHits(instanceOpts: CustomHitsWidgetOptions);
search.addWidget(customHits);

Connector options

HitsRenderingOptions

  • hitsArray<Object>

    The matched hits from Algolia API.

  • resultsObject

    The complete results response from Algolia API.

  • widgetParamsObject

    All original widget options forwarded to the renderFn.

CustomHitsWidgetOptions

  • escapeHits[boolean]
    Default value: false

    If true, escape HTML tags from hits[i]._highlightResult.

  • transformItems[(Array<Object>) => Array<Object>]

    Function to transform the items passed to the templates.

Example

// custom `renderFn` to render the custom Hits widget
function renderFn(HitsRenderingOptions) {
  HitsRenderingOptions.widgetParams.containerNode.html(
    HitsRenderingOptions.hits.map(function(hit) {
      return '<div>' + hit._highlightResult.name.value + '</div>';
    })
  );
}

// connect `renderFn` to Hits logic
var customHits = instantsearch.connectors.connectHits(renderFn);

// mount widget on the page
search.addWidget(
  customHits({
    containerNode: $('#custom-hits-container'),
  })
);


Can't find what you are looking for? Open an issue, we'll get back to you.