connectors connectInfiniteHits

Description

InfiniteHits connector provides the logic to create custom widgets that will render an continuous list of results retrieved from Algolia.

This connector provides a InfiniteHitsRenderingOptions.showMore() function to load next page of matched results.

Usage

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

const makeInfiniteHits= instantsearch.connectors.connectInfiniteHits(
  function renderFn(
      renderOpts: InfiniteHitsRenderingOptions,
      isFirstRendering: boolean) {
    // render the custom InfiniteHits widget
  }
);

const  customInfiniteHits = makeInfiniteHits(instanceOpts: CustomInfiniteHitsWidgetOptions);
search.addWidget(customInfiniteHits);

Connector options

InfiniteHitsRenderingOptions

• hitsArray<Object>

  The aggregated matched hits from Algolia API of all pages.

• resultsObject

  The complete results response from Algolia API.

• showMorefunction

  Loads the next page of hits.

• isLastPageboolean

  Indicates if the last page of hits has been reached.

• widgetParamsObject

  All original widget options forwarded to the renderFn.

CustomInfiniteHitsWidgetOptions

• escapeHTML[boolean]
  Default value: true

  Whether to 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 InfiniteHits widget
function renderFn(InfiniteHitsRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    InfiniteHitsRenderingOptions.widgetParams.containerNode
      .html('<div id="hits"></div><button id="show-more">Load more</button>');

    InfiniteHitsRenderingOptions.widgetParams.containerNode
      .find('#show-more')
      .on('click', function(event) {
        event.preventDefault();
        InfiniteHitsRenderingOptions.showMore();
      });
  }

  InfiniteHitsRenderingOptions.widgetParams.containerNode.find('#hits').html(
    InfiniteHitsRenderingOptions.hits.map(function(hit) {
      return '<div>' + hit._highlightResult.name.value + '</div>';
    })
  );
};

// connect `renderFn` to InfiniteHits logic
var customInfiniteHits = instantsearch.connectors.connectInfiniteHits(renderFn);

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

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