UI libraries / Recommend / API reference / recommend-react

TrendingFacets

A

The <TrendingFacets /> component lets you render Trending Facets.

Installation# A

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# A

You can customize how to render each item by passing a custom component to the itemComponent prop.

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

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

const recommendClient = recommend('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';

function TrendingFacetItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ facetName }) {
  // ...

  return (
    <TrendingFacets
      recommendClient={recommendClient}
      indexName={indexName}
      itemComponent={TrendingFacetItem}
      facetName={facetName}
    />
  );
}

Parameters# A

Parameter Description
itemComponent #
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required

The function to display each item.
headerComponent #
type: ({ classNames, recommendations, translations, Fragment, createElement, html }) => JSX.Element | VNode | VNode[]

The function to render a header for your items.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

function HeaderComponent(props) {
  return (
    if (!props.translations.title) {
      return null;
    }

    return (
      <h3 className={cx('auc-Recommend-title', props.classNames.title)}>
        {props.translations.title}
      </h3>
    );
  );
}
fallbackComponent #
type: ({ createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

A fallback component to render when no recommendations are returned.
view #
type: ViewProps

The view component to render your items into. For example, you can use the horizontalSlider UI component.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

function ListView(props) {
  return (
    <div className="auc-Recommend-container">
      <ol className="auc-Recommend-list">
        {props.items.map(item => (
          <li key={item.objectID} className="auc-Recommend-item">
            <props.itemComponent item={item} />
          </li>
        ))}
      </ol>
    </div>
  );
}
environment #
type: typeof window
default: window

The environment in which your application is running. This is useful when using Recommend in a different context than window.

This component also accepts all the props that useTrendingFacets 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.
Previous
TrendingItems
Next
LookingSimilar
Did you find this page helpful?