UI libraries / Recommend / API reference / recommend-react

useRecommendations

The useRecommendations hook lets you retrieve the Recommendations products for a given AI model.

When retrieving Frequently Bought Together, Related Products, or Related Content items, you should use the useFrequentlyBoughtTogether and useRelatedProducts hooks instead. Only use this hook as an escape hatch when you need control over what model to pass.

Installation

The Recommend React package is available on the npm registry.

Copy 
1
2
3

yarn add @algolia/recommend-react
# or
npm install @algolia/recommend-react

If you don’t want to use a package manager, you can use a standalone endpoint:

Copy 
1
2
3
4

<script src="https://cdn.jsdelivr.net/npm/@algolia/recommend-react"></script>
<script>
  const { FrequentlyBoughtTogether, RelatedProducts, TrendingItems, TrendingFacets } = window['@algolia/recommend-react'];
</script>

Usage

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { useRecommendations } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

function App({ currentObjectID }) {
  // ...
  const { recommendations } = useRecommendations({
    model: 'related-products',
    recommendClient,
    indexName,
    objectIDs: [currentObjectID],
  });

  return (
    <div className="auc-Recommend">
      {recommendations.length > 0 && (
        <ol className="auc-Recommend-list">
          {recommendations.map(recommendation => (
            <li key={recommendation.objectID} className="auc-Recommend-item">
              <pre>
                <code>{JSON.stringify(recommendation)}</code>
              </pre>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

Parameters

Parameter Description
model
type: "related-products" | "bought-together"
Required

The name of the Recommendation model to use.
Parameter Description
recommendClient
type: RecommendClient
Required

The initialized Algolia Recommend client.
indexName
type: string
Required

The name of the target index.
objectIDs
type: string[]
Required

An array of objectIDs of the items to get recommendations for.

If you specify multiple objectIDs, you’ll get a single set of aggregated results from the requests, ordered by their score.

Each objectID you pass in the array counts towards the number of requests in your pricing plan. For example, if you want recommendations for the objectID array [ “A”,”B”,”C”], you’ll consume three requests from your quota, not one.
maxRecommendations
type: number

The number of recommendations to retrieve. Depending on the available recommendations and the other request parameters, the actual number of hits may be lower than that. If maxRecommendations isn’t provided or set to 0, all matching recommendations are returned, and no fallback request is performed.
threshold
type: number

The threshold for the recommendations confidence score (between 0 and 100). Only recommendations with a greater score are returned.
fallbackParameters
type: Omit<SearchParameters, 'page' | 'hitsPerPage' | 'offset' | 'length'>

List of search parameters to send.

Additional filters to use as fallback when there aren’t enough recommendations.
queryParameters
type: Omit<SearchParameters, 'page' | 'hitsPerPage' | 'offset' | 'length'>

List of search parameters to send.
transformItems
type: (items: Array<RecordWithObjectID<TItem>>) => items

A function to transform the retrieved items before passing them to the component. It’s useful when adding, removing, changing, or reordering items.
Previous
useFrequentlyBoughtTogether
Next
useRelatedProducts
Did you find this page helpful?