Skip to main content
The useRelatedProducts hook provides the logic to build a custom component that displays products related to a specific product.

​
Import

import { useRelatedProducts } from 'react-instantsearch';

​
Parameters

​
objectIDs
string[]
required
The objectIDs of the products to get recommendations for.
const { items } = useRelatedProducts({
  objectIDs: ['product-123'],
});
​
maxRecommendations
number
Maximum number of recommendations to display.
const { items } = useRelatedProducts({
  objectIDs: ['product-123'],
  maxRecommendations: 8,
});
​
queryParameters
SearchParameters
Additional search parameters to apply.
​
threshold
number
Minimum score for a recommendation to be included.
​
transformItems
(items: Hit[]) => Hit[]
Function to transform the items.

​
Returns

​
items
Hit[]
The list of related products.
​
results
SearchResults | undefined
The complete recommendation results from Algolia.

​
Examples

import { useRelatedProducts } from 'react-instantsearch';

function RelatedProducts({ productId }) {
  const { items } = useRelatedProducts({
    objectIDs: [productId],
    maxRecommendations: 6,
  });

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

  return (
    <div className="related-products">
      <h3>You May Also Like</h3>
      <div className="product-grid">
        {items.map((item) => (
          <div key={item.objectID} className="product-card">
            <img src={item.image} alt={item.name} />
            <h4>{item.name}</h4>
            <p>${item.price}</p>
            <a href={`/products/${item.objectID}`}>View Details</a>
          </div>
        ))}
      </div>
    </div>
  );
}

import { useRelatedProducts } from 'react-instantsearch';
import { useState } from 'react';

function RelatedProductsCarousel({ productId }) {
  const { items } = useRelatedProducts({
    objectIDs: [productId],
    maxRecommendations: 12,
  });
  const [currentIndex, setCurrentIndex] = useState(0);
  const itemsPerPage = 4;

  const visibleItems = items.slice(
    currentIndex,
    currentIndex + itemsPerPage
  );

  return (
    <div className="carousel">
      <h3>Related Products</h3>
      <button
        onClick={() => setCurrentIndex(Math.max(0, currentIndex - itemsPerPage))}
        disabled={currentIndex === 0}
      >
        Previous
      </button>
      <div className="carousel-items">
        {visibleItems.map((item) => (
          <div key={item.objectID} className="item">
            <img src={item.image} alt={item.name} />
            <p>{item.name}</p>
            <p>${item.price}</p>
          </div>
        ))}
      </div>
      <button
        onClick={() => setCurrentIndex(currentIndex + itemsPerPage)}
        disabled={currentIndex + itemsPerPage >= items.length}
      >
        Next
      </button>
    </div>
  );
}

​
TypeScript

import { useRelatedProducts } from 'react-instantsearch';
import type { UseRelatedProductsProps } from 'react-instantsearch';

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

function RelatedProducts({ productId }: { productId: string }) {
  const { items } = useRelatedProducts<Product>({
    objectIDs: [productId],
  });

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

Build docs developers (and LLMs) love

Get started for freeTalk to us