Deprecated / Recommend / API reference / recommend-react

The useLookingSimilar Hook lets you retrieve recommendations from the Looking Similar model.

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 load it from a content delivery network (CDN):

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 { useLookingSimilar } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';

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

function App({ currentObjectID }) {
  // ...
  const { recommendations } = useLookingSimilar({
    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

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

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.

Did you find this page helpful?