Skip to main content
The <TrendingItems> component displays trending items based on analytics data.

​
Import

import { TrendingItems } from 'react-instantsearch';

​
Props

​
facetName
string
The facet name to get trending items for.
<TrendingItems facetName="category" facetValue="electronics" />
​
facetValue
string
The facet value to get trending items for.
<TrendingItems facetName="category" facetValue="electronics" />
​
limit
number
Maximum number of trending items to display.
<TrendingItems limit={5} />
​
threshold
number
Threshold for the trending score.
<TrendingItems threshold={0.5} />
​
queryParameters
object
Additional query parameters for the recommendation request.
<TrendingItems
  queryParameters={{
    analytics: true,
  }}
/>
​
fallbackParameters
object
Fallback parameters when not enough trending items are found.
<TrendingItems
  fallbackParameters={{
    filters: 'available:true',
  }}
/>
​
escapeHTML
boolean
default:"true"
Whether to escape HTML in the results.
​
transformItems
function
Transform the trending items before displaying them.
<TrendingItems
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      name: item.name.toUpperCase(),
    }))
  }
/>
​
itemComponent
React.Component
Custom component to render each trending item.
<TrendingItems
  itemComponent={({ item }) => (
    <div>
      <img src={item.image} alt={item.name} />
      <h4>{item.name}</h4>
      <p>${item.price}</p>
    </div>
  )}
/>
​
headerComponent
React.Component
Custom component to render the header.
​
emptyComponent
React.Component
Custom component to render when there are no trending items.
​
layoutComponent
React.Component
Custom component to control the layout of items.
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, TrendingItems } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <TrendingItems
        limit={8}
        itemComponent={({ item }) => (
          <div className="product-card">
            <img src={item.image} alt={item.name} />
            <h4>{item.name}</h4>
            <p>${item.price}</p>
            <button>View Details</button>
          </div>
        )}
      />
    </InstantSearch>
  );
}

function CategoryPage({ category }) {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <TrendingItems
        facetName="category"
        facetValue={category}
        limit={6}
        itemComponent={({ item }) => (
          <div className="product-card">
            <img src={item.image} alt={item.name} />
            <h4>{item.name}</h4>
            <p>${item.price}</p>
          </div>
        )}
      />
    </InstantSearch>
  );
}
Trending Items requires Algolia Recommend to be enabled on your account and proper analytics data collection.