Feeds

Use the Feeds component to display multiple independent result sets from a multifeed composition.

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

Signature

<Feeds
  renderFeed={(props: { feedID: string }) => ReactNode}
  isolated={false}
  // Optional props
  transformFeeds={(feedIDs: string[]) => string[]}
/>

Import

JavaScript

import { Feeds } from 'react-instantsearch';

About this widget

Use the <Feeds> component to display multiple independent result sets from a multifeed composition.

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>).

Examples

JavaScript

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

renderFeed · 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.

JavaScript

<Feeds
  renderFeed={({ feedID }) => (
    <div>
      <h2>{feedID}</h2>
      <Hits hitComponent={({ hit }) => <p>{hit.name}</p>} />
    </div>
  )}
/>

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 prop is required to make the choice explicit; future releases may add support for true.

JavaScript

<Feeds
  isolated={false}
  renderFeed={({ feedID }) => <Hits />}
/>

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) => feedIDs.slice(0, 2)}
  renderFeed={({ feedID }) => <Hits />}
/>