Skip to main content
The useTrendingItems hook provides the logic to build a custom component that displays trending items based on Algolia’s Recommend API.

​
Import

import { useTrendingItems } from 'react-instantsearch';

​
Parameters

​
maxRecommendations
number
Maximum number of trending items to display.
const { items } = useTrendingItems({
  maxRecommendations: 10,
});
​
facetName
string
Filter trending items by a specific facet.
const { items } = useTrendingItems({
  facetName: 'category',
});
​
facetValue
string
The value of the facet to filter by.
const { items } = useTrendingItems({
  facetName: 'category',
  facetValue: 'electronics',
});
​
queryParameters
SearchParameters
Additional search parameters to apply.
​
threshold
number
Minimum score for an item to be included.
​
transformItems
(items: Hit[]) => Hit[]
Function to transform the items.

​
Returns

​
items
Hit[]
The list of trending items.
const { items } = useTrendingItems();
​
results
SearchResults | undefined
The complete recommendation results from Algolia.

​
Examples

import { useTrendingItems } from 'react-instantsearch';

function TrendingProducts() {
  const { items } = useTrendingItems({
    maxRecommendations: 8,
  });

  return (
    <div className="trending">
      <h2>Trending Now</h2>
      <div className="product-grid">
        {items.map((item) => (
          <div key={item.objectID} className="product-card">
            <span className="badge">🔥 Trending</span>
            <img src={item.image} alt={item.name} />
            <h3>{item.name}</h3>
            <p>${item.price}</p>
            <button>View Product</button>
          </div>
        ))}
      </div>
    </div>
  );
}

import { useTrendingItems } from 'react-instantsearch';

function TrendingInCategory({ category }) {
  const { items } = useTrendingItems({
    facetName: 'category',
    facetValue: category,
    maxRecommendations: 6,
  });

  if (items.length === 0) {
    return null;
  }

  return (
    <div>
      <h3>Trending in {category}</h3>
      <div className="items">
        {items.map((item) => (
          <div key={item.objectID}>
            <img src={item.image} alt={item.name} />
            <p>{item.name}</p>
            <p>${item.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

​
Homepage Hero Section

import { useTrendingItems } from 'react-instantsearch';

function TrendingHero() {
  const { items } = useTrendingItems({
    maxRecommendations: 4,
  });

  return (
    <section className="hero">
      <h1>What's Hot Right Now</h1>
      <div className="hero-grid">
        {items.map((item, index) => (
          <div
            key={item.objectID}
            className={`hero-item ${index === 0 ? 'featured' : ''}`}
          >
            <img src={item.image} alt={item.name} />
            <div className="overlay">
              <h3>{item.name}</h3>
              <p>{item.description}</p>
              <button>Shop Now</button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

​
With Horizontal Scroll

import { useTrendingItems } from 'react-instantsearch';

function TrendingScroll() {
  const { items } = useTrendingItems({
    maxRecommendations: 15,
  });

  return (
    <div className="trending-section">
      <h2>Trending Products</h2>
      <div className="horizontal-scroll">
        {items.map((item) => (
          <div key={item.objectID} className="scroll-item">
            <img src={item.image} alt={item.name} />
            <h4>{item.name}</h4>
            <p>${item.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

​
TypeScript

import { useTrendingItems } from 'react-instantsearch';
import type { UseTrendingItemsProps } from 'react-instantsearch';

interface Product {
  objectID: string;
  name: string;
  price: number;
  image: string;
}

function TrendingProducts(props?: UseTrendingItemsProps) {
  const { items } = useTrendingItems<Product>(props);

  return (
    <div>
      {items.map((item) => (
        <div key={item.objectID}>{item.name}</div>
      ))}
    </div>
  );
}