Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@algolia/recommend-react

Package Overview
Dependencies
Maintainers
65
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@algolia/recommend-react

Horizontal slider UI component.

  • 1.0.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
65
Created
Source

@algolia/recommend-react

React package for Algolia Recommend.

Installation

yarn add @algolia/recommend-react
# or
npm install @algolia/recommend-react

<RelatedProducts />

Component to display related products.

Usage

Default view
import { RelatedProducts } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const recommendClient = recommend(appId, apiKey);

function RelatedItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  // ...

  return (
    <RelatedProducts
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={RelatedItem}
    />
  );
}
Horizontal slider view

Example with the HorizontalSlider UI component:

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

import '@algolia/ui-components-horizontal-slider-theme';

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const recommendClient = recommend(appId, apiKey);

function RelatedItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  // ...

  return (
    <RelatedProducts
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={RelatedItem}
      view={HorizontalSlider}
    />
  );
}

Props

The component accepts all the shared props and the following:

itemComponent

({ item }) => JSX.Element | required

The product component to display.

classNames
RelatedProductsClassNames
type RelatedProductsClassNames = Partial<{
  root: string;
  title: string;
  container: string;
  list: string;
  item: string;
}>;

The class names for the component.

translations
RelatedProductTranslations
type RelatedProductTranslations = Partial<{
  title: string;
  showMore: string;
}>;

The translations for the component.

view
(props: ViewProps) => JSX.Element
type ViewProps<TItem extends RecordWithObjectID> = {
  items: TItem[];
  itemComponent({ item: TItem }): JSX.Element;
};

The view component to render your items into. You can use the HorizontalSlider UI component.

The default implementation is:

function ListView(props) {
  return (
    <div className="auc-Recommend-container">
      <ol className="auc-Recommend-list">
        {props.items.map((item) => (
          <li key={item.objectID} className="auc-Recommend-item">
            <props.itemComponent item={item} />
          </li>
        ))}
      </ol>
    </div>
  );
}
fallbackComponent

() => JSX.Element

The fallback component to render when no recommendations are returned.

children
(props: ChildrenProps) => JSX.Element
type ChildrenProps<TObject> = {
  classNames: RecommendationClassNames;
  recommendations: TObject[];
  translations: Required<RecommendationTranslations>;
  View(props: unknown): JSX.Element;
};

Render function to modify the complete rendering.

The default implementation is:

function defaultRender(props) {
  if (props.recommendations.length === 0) {
    return null;
  }

  return (
    <section className="auc-Recommend">
      {props.translations.title && <h3>{props.translations.title}</h3>}

      <props.View />
    </section>
  );
}

useRelatedProducts

(props: SharedProps) => { recommendations }

Hook to retrieve related products.

Usage

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

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const recommendClient = recommend(appId, apiKey);

function App({ currentObjectID }) {
  // ...
  const { recommendations } = useRelatedProducts({
    recommendClient,
    indexName,
    objectIDs: [currentObjectID],
  });

  return (
    <div className="auc-Recommend">
      {recommendations.length > 0 && (
        <ol className="auc-Recommend-list">
          {recommendations.map((recommendation) => (
            <li key={recommendation.objectID} className="auc-Recommend-item">
              <pre>
                <code>{JSON.stringify(recommendation)}</code>
              </pre>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

Props

The hook accepts all the shared props.

<FrequentlyBoughtTogether />

Component to display frequently bought together products.

Usage

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

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const recommendClient = recommend(appId, apiKey);

function RelatedItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  // ...

  return (
    <FrequentlyBoughtTogether
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={RelatedItem}
    />
  );
}
Horizontal slider view

Example with the HorizontalSlider UI component:

import { FrequentlyBoughtTogether } from '@algolia/recommend-react';
import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';
import recommend from '@algolia/recommend';

import '@algolia/ui-components-horizontal-slider-theme';

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const recommendClient = recommend(appId, apiKey);

function RelatedItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  // ...

  return (
    <FrequentlyBoughtTogether
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={RelatedItem}
      view={HorizontalSlider}
    />
  );
}

Props

The component accepts all the shared props and the following:

itemComponent

({ item }) => JSX.Element | required

The product component to display.

classNames
FrequentlyBoughtTogetherClassNames
type FrequentlyBoughtTogetherClassNames = Partial<{
  root: string;
  title: string;
  container: string;
  list: string;
  item: string;
}>;

The class names for the component.

translations
FrequentlyBoughtTogetherTranslations
type FrequentlyBoughtTogetherTranslations = Partial<{
  title: string;
  showMore: string;
}>;

The translations for the component.

view
(props: ViewProps) => JSX.Element
type ViewProps<TItem extends RecordWithObjectID> = {
  items: TItem[];
  itemComponent({ item: TItem }): JSX.Element;
};

The view component to render your items into. You can use the HorizontalSlider UI component.

The default implementation is:

function ListView(props) {
  return (
    <div className="auc-Recommend-container">
      <ol className="auc-Recommend-list">
        {props.items.map((item) => (
          <li key={item.objectID} className="auc-Recommend-item">
            <props.itemComponent item={item} />
          </li>
        ))}
      </ol>
    </div>
  );
}
fallbackComponent

() => JSX.Element

The fallback component to render when no recommendations are returned.

Example with a <RelatedProducts /> fallback:

function RelatedItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  return (
    <FrequentlyBoughtTogether
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={RelatedItem}
      fallbackComponent={() => (
        <RelatedProducts
          recommendClient={recommendClient}
          indexName={indexName}
          objectIDs={[currentObjectID]}
          itemComponent={RelatedItem}
        />
      )}
    />
  );
}
children
(props: ChildrenProps) => JSX.Element
type ChildrenProps<TObject> = {
  classNames: RecommendationClassNames;
  recommendations: TObject[];
  translations: Required<RecommendationTranslations>;
  View(props: unknown): JSX.Element;
};

Render function to modify the complete rendering.

The default implementation is:

function defaultRender(props) {
  if (props.recommendations.length === 0) {
    return null;
  }

  return (
    <section className="auc-Recommend">
      {props.translations.title && <h3>{props.translations.title}</h3>}

      <props.View />
    </section>
  );
}

useFrequentlyBoughtTogether

(props: Omit<SharedProps, 'fallbackParameters'>) => { recommendations }

Hook to retrieve frequently bought together products.

Usage

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

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const recommendClient = recommend(appId, apiKey);

function App({ currentObjectID }) {
  // ...
  const { recommendations } = useFrequentlyBoughtTogether({
    recommendClient,
    indexName,
    objectIDs: [currentObjectID],
  });

  return (
    <div className="auc-Recommend">
      {recommendations.length > 0 && (
        <ol className="auc-Recommend-list">
          {recommendations.map((recommendation) => (
            <li key={recommendation.objectID} className="auc-Recommend-item">
              <pre>
                <code>{JSON.stringify(recommendation)}</code>
              </pre>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

Props

The hook accepts all the shared props.

useRecommendations

(props: SharedProps & { model: RecommendationModel }) => { recommendations }

Generic hook to retrieve hits from an AI model.

Usage

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

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const recommendClient = recommend(appId, apiKey);

function App({ currentObjectID }) {
  // ...
  const { recommendations } = useRecommendations({
    model: 'related-products',
    recommendClient,
    indexName,
    objectIDs: [currentObjectID],
  });

  return (
    <div className="auc-Recommend">
      {recommendations.length > 0 && (
        <ol className="auc-Recommend-list">
          {recommendations.map((recommendation) => (
            <li key={recommendation.objectID} className="auc-Recommend-item">
              <pre>
                <code>{JSON.stringify(recommendation)}</code>
              </pre>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

Props

The hook accepts all the shared props and the following:

model

"related-products" | "bought-together" | required

The name of the Recommendation model to use.

Shared props

recommendClient

recommendClient | required

The initialized Algolia search client.

indexName

string | required

The name of the products index.

objectIDs

string[] | required

An array of objectIDs of the products to get recommendations from.

maxRecommendations

number | defaults to the maximum number of recommendations available

The number of recommendations to retrieve.

fallbackParameters

Omit<SearchOptions, 'page' | 'hitsPerPage' | 'offset' | 'length'>

Additional filters to use as fallback should there not be enough recommendations.

queryParameters

SearchParameters | defaults to { analytics: false, enableABTest: false }

List of search parameters to send.

transformItems

(Array<RecordWithObjectID<TItem>>) => Array<RecordWithObjectID<TItem>>
type RecordWithObjectID<TItem> = TItem & {
  objectID: string;
};

Function to transform the items retrieved by Algolia. It's useful to edit, add, remove or reorder them.

FAQs

Package last updated on 30 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc