UI libraries / Recommend / Introduction

Upgrade guide

Upgrading from beta to stable

This guide lists every known breaking change and explains how to upgrade from the beta to the latest version of the Recommend library.

The React library is now recommend-react. It’s also available for JavaScript: recommend-js.

All Recommend packages are available on the npm registry.

Copy 
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:

Copy 
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>

API

The library now exposes a component for each model.

Frequently Bought Together

To display frequently bought together items, you can use the FrequentlyBoughtTogether component.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from 'react';
import { FrequentlyBoughtTogether } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

function App({ currentObjectID }) {
  return (
    <FrequentlyBoughtTogether
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={({ item }) => {
        return (
          <pre>
            <code>{JSON.stringify(item)}</code>
          </pre>
        );
      }}
    />
  );
}

The library also provides a useFrequentlyBoughtTogether hook.

To display related products, you can use the RelatedProducts component.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from 'react';
import { FrequentlyBoughtTogether } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

function App({ currentObjectID }) {
  return (
    <RelatedProducts
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={({ item }) => {
        return (
          <pre>
            <code>{JSON.stringify(item)}</code>
          </pre>
        );
      }}
    />
  );
}

The library also provides a useRelatedProducts hook.

Breaking changes

Beta Breaking change Stable
searchClient Changed, now requires the Recommend client recommendClient
model Removed, automatically handled by the component FrequentlyBoughtTogether or RelatedProducts
objectID: string Changed, now accepts several objectIDs objectIDs: string[]
hitComponent Renamed itemComponent
fallbackFilters: string[] Changed fallbackParameters
Previous
Getting started
Next
recommend-js
Did you find this page helpful?