Developer Hub

Recommend Vanilla JS for web

React JS + Algolia Recommend

Build recommend experiences with UI components and libraries.

Sign up
A computer on a search page, with recommendations being inserted on the side

What is Algolia

Algolia empowers modern developers to build world class search and discovery experiences without any DevOps. 

Libraries with every major language and framework make it easy to enrich your users' experiences. 

Algolia UI Components - Recommend JS

Add recommendations to your javascript applications

A little more about Recommend Vanilla JS UI library -  

  • Add recommendations to your search experiences using pre-built, flexible and customizable library
  • Learn how to display recommended items in your front-end
  • Open source, production-ready and maintained by Algolia 

Features

  • Provides pre-built UI components following best practice principles for React JS that remain independent from external frameworks
  • Integrate into your existing react UI or app 
  • If you already have instant search or autocomplete implemented, recommend can be added
  • Comes with a basic CSS theme, completely customizable (in fact, we highly recommend you customize it)
  • Progressive customization of components (use, extend, or customize) 
  • Manages all business logic for search requests, responses, and states for the recommend models
  • Read documentation about how Algolia Recommend works

Version

Related Integrations

Key links

Get started

HTML (get a free account here)

1import { RelatedProducts } from "@algolia/recommend-react";
2import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';

CSS

1body { font-family: sans-serif; padding: 1em; }
2.items-wrapper { display: flex; justify-content: space-evenly; gap: 1rem; }
3.recommend-demo { margin: 1rem auto; }

Recommendation

1class App extends Component {
2  render() {
3    return (
4      <div className="recommend-demo">
5        <section className="items-wrapper">
6          <RelatedProducts
7            recommendClient={recommendClient}
8            indexName="demo_recommend"
9            objectIDs={['object1', 'object2']}
10            itemComponent={RelatedItem}
11            view={HorizontalSlider}
12            maxRecommendations={5}
13            translations={{
14              title: "Complete your look",
15            }}
16          />
17        </section>
18      </div>
19    )
20  }
21}
22
23function RelatedItem (props) {
24  return (
25    <div>
26      <img align="center" src={props.item.image} alt={"product"} />
27      <div className="item-content">
28        <div className="item-name">{props.item.name}</div>
29        <div className="item-description">{props.item.description}</div>
30        <div className="item-price">${props.item.price}</div>
31      </div>
32    </div>
33  )
34}
Get started for freeExplore all developer docs

Use cases & demos for Algolia Recommend

Showcase
Sample Applications

Personalized Email Recommendations

This app shows how to leverage Algolia Personalization to display product recommendations in emails