🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
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.

Related Products#

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?