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.
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:
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#
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#
model
# |
type: "related-products" | "bought-together"
Required
The name of the Recommendation model to use. |
recommendClient
# |
type: RecommendClient
Required
The initialized Algolia recommend client. |
indexName
# |
type: string
Required
The name of the target index. |
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 |
threshold
# |
type: number
Required
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 to add or remove items, change them, or reorder them. |
facetName
# |
type: string
Optional
The facet attribute to get recommendations for. This parameter is used along with facetValue. |
facetValue
# |
type: string
Optional
The value of the target facet. |
facetName
# |
type: string
Optional
The facet attribute to get recommendations for. This parameter is used along with facetValue. |
facetValue
# |
type: string
Optional
The value of the target facet. |
