Skip to main content
The <FrequentlyBoughtTogether> component displays product recommendations based on items frequently purchased together.

​
Import

import { FrequentlyBoughtTogether } from 'react-instantsearch';

​
Props

​
objectIDs
string[]
required
The object IDs to get recommendations for.
<FrequentlyBoughtTogether objectIDs={['product-123']} />
​
limit
number
Maximum number of recommendations to display.
<FrequentlyBoughtTogether objectIDs={['product-123']} limit={5} />
​
threshold
number
Threshold for the recommendation score.
<FrequentlyBoughtTogether
  objectIDs={['product-123']}
  threshold={0.5}
/>
​
queryParameters
object
Additional query parameters for the recommendation request.
<FrequentlyBoughtTogether
  objectIDs={['product-123']}
  queryParameters={{
    analytics: true,
  }}
/>
​
fallbackParameters
object
Fallback parameters when not enough recommendations are found.
<FrequentlyBoughtTogether
  objectIDs={['product-123']}
  fallbackParameters={{
    filters: 'available:true',
  }}
/>
​
escapeHTML
boolean
default:"true"
Whether to escape HTML in the results.
​
transformItems
function
Transform the recommendation items before displaying them.
<FrequentlyBoughtTogether
  objectIDs={['product-123']}
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      discounted: item.price * 0.9,
    }))
  }
/>
​
itemComponent
React.Component
Custom component to render each recommendation item.
<FrequentlyBoughtTogether
  objectIDs={['product-123']}
  itemComponent={({ item }) => (
    <div>
      <img src={item.image} alt={item.name} />
      <h4>{item.name}</h4>
      <p>${item.price}</p>
    </div>
  )}
/>
​
headerComponent
React.Component
Custom component to render the header.
​
emptyComponent
React.Component
Custom component to render when there are no recommendations.
​
layoutComponent
React.Component
Custom component to control the layout of items.
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, FrequentlyBoughtTogether } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function ProductPage({ productId }) {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <FrequentlyBoughtTogether
        objectIDs={[productId]}
        limit={4}
        itemComponent={({ item }) => (
          <div className="product-card">
            <img src={item.image} alt={item.name} />
            <h4>{item.name}</h4>
            <p>${item.price}</p>
            <button>Add to Cart</button>
          </div>
        )}
      />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us