feeds

Use the feeds widget to display multiple independent result sets from a multifeed composition.

This widget is and is subject to change in minor versions.

Signature

feeds({
  container: string | HTMLElement,
  widgets: (container: HTMLElement, feedID: string) => Widget[] | null | undefined,
  isolated: false,
  // Optional parameters
  transformFeeds?: (feedIDs: string[]) => string[],
});

Import

JavaScript

import { feeds } from 'instantsearch.js/es/widgets';

The feeds widget isn’t available from the UMD build. Use InstantSearch.js with a packaging system.

About this widget

Use the feeds widget to display multiple independent result sets from a multifeed composition. For each feed in the composition, the widget creates a scoped container and calls the widgets function to add InstantSearch widgets for that feed.

Requires a composition-based InstantSearch instance (the compositionID option must be set on instantsearch).

Examples

JavaScript

import instantsearch from 'instantsearch.js';
import { feeds, hits } from 'instantsearch.js/es/widgets';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'ALGOLIA_APPLICATION_ID',
  'ALGOLIA_SEARCH_API_KEY'
);

const search = instantsearch({
  indexName: 'instant_search',
  searchClient,
  compositionID: 'YourCompositionID',
});

search.addWidgets([
  feeds({
    container: '#feeds',
    isolated: false,
    widgets(container, feedID) {
      return [
        hits({
          container,
          templates: {
            item(hit, { html, components }) {
              return html`
                <h2>${components.Highlight({ attribute: 'name', hit })}</h2>
                <p>${hit.description}</p>
              `;
            },
          },
        }),
      ];
    },
  }),
]);

search.start();

Options

container · string | HTMLElement · required

The CSS selector or HTMLElement to insert the widget into.

string

feeds({
  container: '#feeds',
  widgets(container) { return []; },
});

widgets · function · required

A function that returns the widgets to use for each feed. Called once for each feedID when a new feed appears in the composition response. It receives:

• container. An HTMLElement scoped to this feed. Pass it to the container option of your widget.
• feedID. The unique identifier of the feed, as defined in the composition configuration.

Return null or undefined to render the feed container without any widgets.

JavaScript

feeds({
  // ...
  widgets(container, feedID) {
    return [
      hits({
        container,
        templates: {
          item(hit, { html }) {
            return html`<p>${hit.name}</p>`;
          },
        },
      }),
    ];
  },
});

isolated · boolean · required

Whether each feed runs an isolated search with its own search parameters. Currently only false is supported, meaning all feeds share the same global search state. The option is required to make the choice explicit; future releases may add support for true.

JavaScript

feeds({
  // ...
  isolated: false,
  widgets(container) { return []; },
});

transformFeeds · function

A function to transform, reorder, or filter the feed IDs before rendering. Receives the array of feed IDs from the composition response and must return an array of feed IDs (strings).

JavaScript

feeds({
  // ...
  isolated: false,
  transformFeeds(feedIDs) {
    // render only the first two feeds
    return feedIDs.slice(0, 2);
  },
  widgets(container) { return []; },
});