TrendingItems
On this page
The <TrendingItems />
component lets you render Trending items.
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
You can customize how to render each item by passing a custom component to the itemComponent
prop.
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
import { TrendingItems } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
function TrendingItem({ item }) {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}
function App() {
// ...
return (
<TrendingItems
recommendClient={recommendClient}
indexName={indexName}
itemComponent={TrendingItem}
/>
);
}
You can access trending items for a facet by passing a facet to your component.
1
2
3
4
5
6
7
<TrendingItems
recommendClient={recommendClient}
indexName={indexName}
itemComponent={TrendingItem}
facetName={facetName}
facetValue={facetValue}
/>
Parameters
itemComponent
|
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required
The function to display each item. |
||
children
|
type: (props: ChildrenProps) => JSX.Element
A render function to fully customize what’s displayed. The default implementation is:
Copy
|
||
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
|
||
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 The default implementation is:
Copy
|
||
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 |
This component also accepts all the props that useTrendingItems
supports:
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. |
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. |
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. |