useRelatedProducts
The useRelatedProducts hook lets you retrieve the Related Products or Related Content.
Installation# A
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
import { useRelatedProducts } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';
const recommendClient = recommend('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';
function App({ currentObjectID }) {
// ...
const { recommendations } = useRelatedProducts({
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# A
This hook also accepts all the props that useRecommendations supports.
| Parameter | Description |
|---|---|
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
The threshold for the recommendations confidence score (between 0 and 100). Only recommendations with a greater score are returned. |
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. |
facetName
# |
type: string
Required
The facet attribute to get recommendations for. |
