> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# feeds

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

export const customLabel_0 = "in beta"

<Callout icon="flask-conical" color="#14b8a6">
  This widget is **{customLabel_0 || "experimental"}** and is subject to change in minor versions.
</Callout>

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

## Import

```js JavaScript icon=code theme={"system"}
import { feeds } from 'instantsearch.js/es/widgets';
```

<Note>
  The `feeds` widget isn't available from the UMD build.
  Use InstantSearch.js with a packaging system.
</Note>

## About this widget

Use the `feeds` widget to display multiple independent result sets from a [multifeed composition](/doc/guides/managing-results/compositions/multifeed-compositions).
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`](/doc/api-reference/widgets/instantsearch/js)).

## Examples

```js JavaScript icon=code theme={"system"}
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

<ParamField body="container" type="string | HTMLElement" required>
  The CSS selector or `HTMLElement` to insert the widget into.

  <CodeGroup>
    ```js string theme={"system"}
    feeds({
      container: '#feeds',
      widgets(container) { return []; },
    });
    ```

    ```js HTMLElement theme={"system"}
    feeds({
      container: document.querySelector('#feeds'),
      widgets(container) { return []; },
    });
    ```
  </CodeGroup>
</ParamField>

<ParamField body="widgets" type="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.

  ```js JavaScript icon=code theme={"system"}
  feeds({
    // ...
    widgets(container, feedID) {
      return [
        hits({
          container,
          templates: {
            item(hit, { html }) {
              return html`<p>${hit.name}</p>`;
            },
          },
        }),
      ];
    },
  });
  ```
</ParamField>

<ParamField body="isolated" type="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`.

  ```js JavaScript icon=code theme={"system"}
  feeds({
    // ...
    isolated: false,
    widgets(container) { return []; },
  });
  ```
</ParamField>

<ParamField body="transformFeeds" type="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).

  ```js JavaScript icon=code theme={"system"}
  feeds({
    // ...
    isolated: false,
    transformFeeds(feedIDs) {
      // render only the first two feeds
      return feedIDs.slice(0, 2);
    },
    widgets(container) { return []; },
  });
  ```
</ParamField>