> ## 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 component 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>

```tsx Signature theme={"system"}
<Feeds
  renderFeed={(props: { feedID: string }) => ReactNode}
  isolated={false}
  // Optional props
  transformFeeds={(feedIDs: string[]) => string[]}
/>
```

## Import

```jsx JavaScript icon=code theme={"system"}
import { Feeds } from 'react-instantsearch';
```

## About this widget

Use the `<Feeds>` component 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 provides an `IndexContext` scoped to that feed and calls `renderFeed` to render its content.

Requires a composition-based InstantSearch instance (the `compositionID` option must be set on [`<InstantSearch>`](/doc/api-reference/widgets/instantsearch/react)).

## Examples

```jsx JavaScript icon=code theme={"system"}
import React from 'react';
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import { InstantSearch, Feeds, Hits } from 'react-instantsearch';

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

function App() {
  return (
    <InstantSearch
      indexName="instant_search"
      searchClient={searchClient}
      compositionID="YourCompositionID"
    >
      <Feeds
        isolated={false}
        renderFeed={({ feedID }) => (
          <div>
            <h2>{feedID}</h2>
            <Hits
              hitComponent={({ hit }) => <p>{hit.name}</p>}
            />
          </div>
        )}
      />
    </InstantSearch>
  );
}
```

## Props

<ParamField body="renderFeed" type="function" required>
  A function that renders the content for each feed.
  Called once for each feed in the composition response.
  It receives:

  * `feedID`. The unique identifier of the feed, as defined in the composition configuration.

  The function renders inside an `IndexContext` scoped to this feed, so any InstantSearch widgets you render here automatically use the correct feed's results.

  ```jsx JavaScript icon=code theme={"system"}
  <Feeds
    renderFeed={({ feedID }) => (
      <div>
        <h2>{feedID}</h2>
        <Hits hitComponent={({ hit }) => <p>{hit.name}</p>} />
      </div>
    )}
  />
  ```
</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 prop is required to make the choice explicit; future releases may add support for `true`.

  ```jsx JavaScript icon=code theme={"system"}
  <Feeds
    isolated={false}
    renderFeed={({ feedID }) => <Hits />}
  />
  ```
</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).

  ```jsx JavaScript icon=code theme={"system"}
  <Feeds
    isolated={false}
    transformFeeds={(feedIDs) => feedIDs.slice(0, 2)}
    renderFeed={({ feedID }) => <Hits />}
  />
  ```
</ParamField>