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

@algolia/recommend-react

Package Overview
Dependencies
Maintainers
68
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@algolia/recommend-react - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/esm/useStableValue.d.ts

2

dist/esm/useFrequentlyBoughtTogether.d.ts
import { GetFrequentlyBoughtTogetherProps } from '@algolia/recommend-core';
export declare function useFrequentlyBoughtTogether<TObject>(props: GetFrequentlyBoughtTogetherProps<TObject>): {
export declare function useFrequentlyBoughtTogether<TObject>({ indexName, maxRecommendations, objectIDs: userObjectIDs, queryParameters: userQueryParameters, recommendClient, threshold, transformItems: userTransformItems, }: GetFrequentlyBoughtTogetherProps<TObject>): {
status: import("@algolia/recommend-vdom").RecommendStatus;
recommendations: import("@algolia/recommend-core").RecordWithObjectID<TObject>[];
};

@@ -11,4 +11,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";

import { useAlgoliaAgent } from './useAlgoliaAgent';
import { useStableValue } from './useStableValue';
import { useStatus } from './useStatus';
export function useFrequentlyBoughtTogether(props) {
export function useFrequentlyBoughtTogether(_ref) {
var indexName = _ref.indexName,
maxRecommendations = _ref.maxRecommendations,
userObjectIDs = _ref.objectIDs,
userQueryParameters = _ref.queryParameters,
recommendClient = _ref.recommendClient,
threshold = _ref.threshold,
userTransformItems = _ref.transformItems;
var _useState = useState({

@@ -25,12 +34,23 @@ recommendations: []

var objectIDs = useStableValue(userObjectIDs);
var transformItems = useStableValue(userTransformItems);
var queryParameters = useStableValue(userQueryParameters);
useAlgoliaAgent({
recommendClient: props.recommendClient
recommendClient: recommendClient
});
useEffect(function () {
setStatus('loading');
getFrequentlyBoughtTogether(props).then(function (response) {
getFrequentlyBoughtTogether({
indexName: indexName,
maxRecommendations: maxRecommendations,
objectIDs: objectIDs,
queryParameters: queryParameters,
recommendClient: recommendClient,
threshold: threshold,
transformItems: transformItems
}).then(function (response) {
setResult(response);
setStatus('idle');
});
}, [props, setStatus]);
}, [indexName, maxRecommendations, objectIDs, queryParameters, recommendClient, setStatus, threshold, transformItems]);
return _objectSpread(_objectSpread({}, result), {}, {

@@ -37,0 +57,0 @@ status: status

import { GetRecommendationsProps } from '@algolia/recommend-core';
export declare function useRecommendations<TObject>(props: GetRecommendationsProps<TObject>): {
export declare function useRecommendations<TObject>({ fallbackParameters: userFallbackParameters, indexName, maxRecommendations, model, objectIDs: userObjectIDs, queryParameters: userQueryParameters, recommendClient, threshold, transformItems: userTransformItems, }: GetRecommendationsProps<TObject>): {
status: import("@algolia/recommend-vdom").RecommendStatus;
recommendations: import("@algolia/recommend-core").RecordWithObjectID<TObject>[];
};

@@ -11,4 +11,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";

import { useAlgoliaAgent } from './useAlgoliaAgent';
import { useStableValue } from './useStableValue';
import { useStatus } from './useStatus';
export function useRecommendations(props) {
export function useRecommendations(_ref) {
var userFallbackParameters = _ref.fallbackParameters,
indexName = _ref.indexName,
maxRecommendations = _ref.maxRecommendations,
model = _ref.model,
userObjectIDs = _ref.objectIDs,
userQueryParameters = _ref.queryParameters,
recommendClient = _ref.recommendClient,
threshold = _ref.threshold,
userTransformItems = _ref.transformItems;
var _useState = useState({

@@ -25,12 +36,26 @@ recommendations: []

var objectIDs = useStableValue(userObjectIDs);
var transformItems = useStableValue(userTransformItems);
var queryParameters = useStableValue(userQueryParameters);
var fallbackParameters = useStableValue(userFallbackParameters);
useAlgoliaAgent({
recommendClient: props.recommendClient
recommendClient: recommendClient
});
useEffect(function () {
setStatus('loading');
getRecommendations(props).then(function (response) {
getRecommendations({
fallbackParameters: fallbackParameters,
indexName: indexName,
maxRecommendations: maxRecommendations,
model: model,
objectIDs: objectIDs,
queryParameters: queryParameters,
recommendClient: recommendClient,
threshold: threshold,
transformItems: transformItems
}).then(function (response) {
setResult(response);
setStatus('idle');
});
}, [props, setStatus]);
}, [fallbackParameters, indexName, maxRecommendations, model, objectIDs, queryParameters, recommendClient, setStatus, threshold, transformItems]);
return _objectSpread(_objectSpread({}, result), {}, {

@@ -37,0 +62,0 @@ status: status

import { GetRelatedProductsProps } from '@algolia/recommend-core';
export declare function useRelatedProducts<TObject>(props: GetRelatedProductsProps<TObject>): {
export declare function useRelatedProducts<TObject>({ fallbackParameters: userFallbackParameters, indexName, maxRecommendations, objectIDs: userObjectIDs, queryParameters: userQueryParameters, recommendClient, threshold, transformItems: userTransformItems, }: GetRelatedProductsProps<TObject>): {
status: import("@algolia/recommend-vdom").RecommendStatus;
recommendations: import("@algolia/recommend-core").RecordWithObjectID<TObject>[];
};

@@ -11,4 +11,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";

import { useAlgoliaAgent } from './useAlgoliaAgent';
import { useStableValue } from './useStableValue';
import { useStatus } from './useStatus';
export function useRelatedProducts(props) {
export function useRelatedProducts(_ref) {
var userFallbackParameters = _ref.fallbackParameters,
indexName = _ref.indexName,
maxRecommendations = _ref.maxRecommendations,
userObjectIDs = _ref.objectIDs,
userQueryParameters = _ref.queryParameters,
recommendClient = _ref.recommendClient,
threshold = _ref.threshold,
userTransformItems = _ref.transformItems;
var _useState = useState({

@@ -25,12 +35,25 @@ recommendations: []

var objectIDs = useStableValue(userObjectIDs);
var transformItems = useStableValue(userTransformItems);
var queryParameters = useStableValue(userQueryParameters);
var fallbackParameters = useStableValue(userFallbackParameters);
useAlgoliaAgent({
recommendClient: props.recommendClient
recommendClient: recommendClient
});
useEffect(function () {
setStatus('loading');
getRelatedProducts(props).then(function (response) {
getRelatedProducts({
fallbackParameters: fallbackParameters,
indexName: indexName,
maxRecommendations: maxRecommendations,
objectIDs: objectIDs,
queryParameters: queryParameters,
recommendClient: recommendClient,
threshold: threshold,
transformItems: transformItems
}).then(function (response) {
setResult(response);
setStatus('idle');
});
}, [props, setStatus]);
}, [fallbackParameters, indexName, maxRecommendations, objectIDs, queryParameters, recommendClient, setStatus, threshold, transformItems]);
return _objectSpread(_objectSpread({}, result), {}, {

@@ -37,0 +60,0 @@ status: status

@@ -1,1 +0,1 @@

export declare const version = "1.0.0";
export declare const version = "1.1.0";

@@ -1,1 +0,1 @@

export var version = '1.0.0';
export var version = '1.1.0';

@@ -1,3 +0,3 @@

/*! @algolia/recommend-react 1.0.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/ui-components */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@algolia/recommend-react"]={},e.React)}(this,(function(e,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(t);function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.filter(Boolean).join(" ")}function i(e){var t=e.createElement;return function(e){return 0===e.recommendations.length&&"idle"===e.status?t(e.Fallback,null):t("section",{className:a("auc-Recommend",e.classNames.root)},t(e.Header,{classNames:e.classNames,recommendations:e.recommendations,translations:e.translations}),t(e.View,null))}}function u(e){var t=e.createElement;return function(e){return e.translations.title?t("h3",{className:a("auc-Recommend-title",e.classNames.title)},e.translations.title):null}}function s(e){var t=e.createElement;return function(e){return t("div",{className:a("auc-Recommend-container",e.classNames.container)},t("ol",{className:a("auc-Recommend-list",e.classNames.list)},e.items.map((function(r){return t("li",{key:r.objectID,className:a("auc-Recommend-item",e.classNames.item)},t(e.itemComponent,{item:r}))}))))}}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function p(e,t){if(e){if("string"==typeof e)return f(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}function b(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,c=[],a=!0,i=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(c.push(n.value),!t||c.length!==t);a=!0);}catch(e){i=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(i)throw o}}return c}}(e,t)||p(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function O(e){return function(e){if(Array.isArray(e))return f(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||p(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e){var t,r,n=e.response,o=e.maxRecommendations;return function(e,t){var r=O(t);return r.sort(e),r}((function(e,t){return(e._score||0)>(t._score||0)?-1:1}),(t="objectID",r=n.results.map((function(e){return e.hits})).flat(),O(new Map(r.map((function(e){return[e[t],e]}))).values()))).slice(0,o&&o>0?o:void 0)}var g="1.0.0",j=["objectIDs","recommendClient","transformItems"];function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?v(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):v(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var P=["objectIDs","recommendClient","transformItems"];function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var E=["objectIDs","recommendClient","transformItems"];function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function C(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?S(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function I(e){t.useEffect((function(){e.recommendClient.addAlgoliaAgent("recommend-react","1.0.0")}),[e.recommendClient])}function R(e){var r=t.useRef(void 0),n=b(t.useState(e),2),o=n[0],c=n[1];return t.useEffect((function(){"stalled"!==o&&r.current&&clearTimeout(r.current),"loading"===o&&(r.current=setTimeout((function(){c("stalled")}),300))}),[o]),{status:o,setStatus:c}}function F(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function A(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?F(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):F(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function N(e){var r=b(t.useState({recommendations:[]}),2),n=r[0],o=r[1],c=R("loading"),a=c.status,i=c.setStatus;return I({recommendClient:e.recommendClient}),t.useEffect((function(){i("loading"),function(e){var t=e.objectIDs,r=e.recommendClient,n=e.transformItems,o=void 0===n?function(e){return e}:n,c=d(e,j),a=t.map((function(e){return h(h({},c),{},{objectID:e})}));return r.addAlgoliaAgent("recommend-core",g),r.getFrequentlyBoughtTogether(a).then((function(e){return y({response:e,maxRecommendations:c.maxRecommendations})})).then((function(e){return{recommendations:o(e)}}))}(e).then((function(e){o(e),i("idle")}))}),[e,i]),A(A({},n),{},{status:a})}var k,x,T,q=(k={createElement:t.createElement,Fragment:t.Fragment},x=k.createElement,T=k.Fragment,function(e){var t,r,n,a,m,f=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({title:"Frequently bought together",sliderLabel:"Frequently bought together products"},e.translations),p=null!==(t=e.classNames)&&void 0!==t?t:{},b=null!==(r=e.children)&&void 0!==r?r:i({createElement:x,Fragment:T}),d=null!==(n=e.fallbackComponent)&&void 0!==n?n:function(){return null},O=null!==(a=e.headerComponent)&&void 0!==a?a:u({createElement:x,Fragment:T}),y=null!==(m=e.view)&&void 0!==m?m:s({createElement:x,Fragment:T});return b({classNames:p,Fallback:d,Header:O,recommendations:e.items,status:e.status,translations:f,View:function(t){return x(y,o({classNames:p,itemComponent:e.itemComponent,items:e.items,translations:f},t))}})});function B(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function _(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?B(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):B(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function H(e){var r=b(t.useState({recommendations:[]}),2),n=r[0],o=r[1],c=R("loading"),a=c.status,i=c.setStatus;return I({recommendClient:e.recommendClient}),t.useEffect((function(){i("loading"),function(e){var t=e.objectIDs,r=e.recommendClient,n=e.transformItems,o=void 0===n?function(e){return e}:n,c=d(e,E),a=t.map((function(e){return C(C({},c),{},{objectID:e})}));return r.addAlgoliaAgent("recommend-core",g),r.getRelatedProducts(a).then((function(e){return y({response:e,maxRecommendations:c.maxRecommendations})})).then((function(e){return{recommendations:o(e)}}))}(e).then((function(e){o(e),i("idle")}))}),[e,i]),_(_({},n),{},{status:a})}var M=function(e){var t=e.createElement,r=e.Fragment;return function(e){var n,a,l,f,p,b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({title:"Related products",sliderLabel:"Related products"},e.translations),d=null!==(n=e.classNames)&&void 0!==n?n:{},O=null!==(a=e.children)&&void 0!==a?a:i({createElement:t,Fragment:r}),y=null!==(l=e.fallbackComponent)&&void 0!==l?l:function(){return null},g=null!==(f=e.headerComponent)&&void 0!==f?f:u({createElement:t,Fragment:r}),j=null!==(p=e.view)&&void 0!==p?p:s({createElement:t,Fragment:r});return O({classNames:d,Fallback:y,Header:g,recommendations:e.items,status:e.status,translations:b,View:function(r){return t(j,o({classNames:d,itemComponent:e.itemComponent,items:e.items,translations:b},r))}})}}({createElement:t.createElement,Fragment:t.Fragment});function V(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function L(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?V(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):V(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}e.FrequentlyBoughtTogether=function(e){var t=N(e),r=t.recommendations,c=t.status;return n.default.createElement(q,o({},e,{items:r,status:c}))},e.RelatedProducts=function(e){var t=H(e),r=t.recommendations,c=t.status;return n.default.createElement(M,o({},e,{items:r,status:c}))},e.useFrequentlyBoughtTogether=N,e.useRecommendations=function(e){var r=b(t.useState({recommendations:[]}),2),n=r[0],o=r[1],c=R("loading"),a=c.status,i=c.setStatus;return I({recommendClient:e.recommendClient}),t.useEffect((function(){i("loading"),function(e){var t=e.objectIDs,r=e.recommendClient,n=e.transformItems,o=void 0===n?function(e){return e}:n,c=d(e,P),a=t.map((function(e){return D(D({},c),{},{objectID:e})}));return r.addAlgoliaAgent("recommend-core",g),r.getRecommendations(a).then((function(e){return y({response:e,maxRecommendations:c.maxRecommendations})})).then((function(e){return{recommendations:o(e)}}))}(e).then((function(e){o(e),i("idle")}))}),[e,i]),L(L({},n),{},{status:a})},e.useRelatedProducts=H,Object.defineProperty(e,"__esModule",{value:!0})}));
/*! @algolia/recommend-react 1.1.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/recommend */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@algolia/recommend-react"]={},e.React)}(this,(function(e,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(t);function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.filter(Boolean).join(" ")}function i(e){var t=e.createElement;return function(e){return 0===e.recommendations.length&&"idle"===e.status?t(e.Fallback,null):t("section",{className:c("auc-Recommend",e.classNames.root)},t(e.Header,{classNames:e.classNames,recommendations:e.recommendations,translations:e.translations}),t(e.View,null))}}function s(e){var t=e.createElement;return function(e){return e.translations.title?t("h3",{className:c("auc-Recommend-title",e.classNames.title)},e.translations.title):null}}function u(e){var t=e.createElement;return function(e){return t("div",{className:c("auc-Recommend-container",e.classNames.container)},t("ol",{className:c("auc-Recommend-list",e.classNames.list)},e.items.map((function(r){return t("li",{key:r.objectID,className:c("auc-Recommend-item",e.classNames.item)},t(e.itemComponent,{item:r}))}))))}}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function d(e,t){if(e){if("string"==typeof e)return f(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}function b(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a=[],c=!0,i=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(i)throw o}}return a}}(e,t)||d(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e){return function(e){if(Array.isArray(e))return f(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||d(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e){var t,r,n=e.response,o=e.maxRecommendations;return function(e,t){var r=p(t);return r.sort(e),r}((function(e,t){return(e._score||0)>(t._score||0)?-1:1}),(t="objectID",r=n.results.map((function(e){return e.hits})).flat(),p(new Map(r.map((function(e){return[e[t],e]}))).values()))).slice(0,o&&o>0?o:void 0)}var g="1.1.0";function O(e){t.useEffect((function(){e.recommendClient.addAlgoliaAgent("recommend-react","1.1.0")}),[e.recommendClient])}var h=Object.prototype.hasOwnProperty;function j(e,t){var r,n;if(e===t)return!0;if(e&&t&&(r=e.constructor)===t.constructor){if(r===Date)return e.getTime()===t.getTime();if(r===RegExp)return e.toString()===t.toString();if(r===Array){if((n=e.length)===t.length)for(;n--&&j(e[n],t[n]););return-1===n}if(!r||"object"==typeof e){for(r in n=0,e){if(h.call(e,r)&&++n&&!h.call(t,r))return!1;if(!(r in t)||!j(e[r],t[r]))return!1}return Object.keys(t).length===n}}return e!=e&&t!=t}function v(e){var r=b(t.useState((function(){return e})),2),n=r[0],o=r[1];return t.useEffect((function(){!1===j(n,e)&&o(e)}),[e]),n}function P(e){var r=t.useRef(void 0),n=b(t.useState(e),2),o=n[0],a=n[1];return t.useEffect((function(){"stalled"!==o&&r.current&&clearTimeout(r.current),"loading"===o&&(r.current=setTimeout((function(){a("stalled")}),300))}),[o]),{status:o,setStatus:a}}function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function D(e){var r=e.indexName,n=e.maxRecommendations,o=e.objectIDs,a=e.queryParameters,c=e.recommendClient,i=e.threshold,s=e.transformItems,u=b(t.useState({recommendations:[]}),2),l=u[0],m=u[1],f=P("loading"),d=f.status,p=f.setStatus,h=v(o),j=v(s),w=v(a);return O({recommendClient:c}),t.useEffect((function(){p("loading"),function(e){var t=e.objectIDs,r=e.recommendClient,n=e.transformItems,o=void 0===n?function(e){return e}:n,a=e.indexName,c=e.maxRecommendations,i=e.queryParameters,s=e.threshold,u=t.map((function(e){return{indexName:a,maxRecommendations:c,objectID:e,queryParameters:i,threshold:s}}));return r.addAlgoliaAgent("recommend-core",g),r.getFrequentlyBoughtTogether(u).then((function(e){return y({maxRecommendations:c,response:e})})).then((function(e){return{recommendations:o(e)}}))}({indexName:r,maxRecommendations:n,objectIDs:h,queryParameters:w,recommendClient:c,threshold:i,transformItems:j}).then((function(e){m(e),p("idle")}))}),[r,n,h,w,c,p,i,j]),E(E({},l),{},{status:d})}var x,R,N,S=(x={createElement:t.createElement,Fragment:t.Fragment},R=x.createElement,N=x.Fragment,function(e){var t,r,n,c,m,f=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({title:"Frequently bought together",sliderLabel:"Frequently bought together products"},e.translations),d=null!==(t=e.classNames)&&void 0!==t?t:{},b=null!==(r=e.children)&&void 0!==r?r:i({createElement:R,Fragment:N}),p=null!==(n=e.fallbackComponent)&&void 0!==n?n:function(){return null},y=null!==(c=e.headerComponent)&&void 0!==c?c:s({createElement:R,Fragment:N}),g=null!==(m=e.view)&&void 0!==m?m:u({createElement:R,Fragment:N});return b({classNames:d,Fallback:p,Header:y,recommendations:e.items,status:e.status,translations:f,View:function(t){return R(g,o({classNames:d,itemComponent:e.itemComponent,items:e.items,translations:f},t))}})});function I(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function C(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?I(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):I(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function k(e){var r=e.fallbackParameters,n=e.indexName,o=e.maxRecommendations,a=e.objectIDs,c=e.queryParameters,i=e.recommendClient,s=e.threshold,u=e.transformItems,l=b(t.useState({recommendations:[]}),2),m=l[0],f=l[1],d=P("loading"),p=d.status,h=d.setStatus,j=v(a),w=v(u),E=v(c),D=v(r);return O({recommendClient:i}),t.useEffect((function(){h("loading"),function(e){var t=e.objectIDs,r=e.recommendClient,n=e.transformItems,o=void 0===n?function(e){return e}:n,a=e.fallbackParameters,c=e.indexName,i=e.maxRecommendations,s=e.queryParameters,u=e.threshold,l=t.map((function(e){return{fallbackParameters:a,indexName:c,maxRecommendations:i,objectID:e,queryParameters:s,threshold:u}}));return r.addAlgoliaAgent("recommend-core",g),r.getRelatedProducts(l).then((function(e){return y({maxRecommendations:i,response:e})})).then((function(e){return{recommendations:o(e)}}))}({fallbackParameters:D,indexName:n,maxRecommendations:o,objectIDs:j,queryParameters:E,recommendClient:i,threshold:s,transformItems:w}).then((function(e){f(e),h("idle")}))}),[D,n,o,j,E,i,h,s,w]),C(C({},m),{},{status:p})}var F=function(e){var t=e.createElement,r=e.Fragment;return function(e){var n,c,l,f,d,b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({title:"Related products",sliderLabel:"Related products"},e.translations),p=null!==(n=e.classNames)&&void 0!==n?n:{},y=null!==(c=e.children)&&void 0!==c?c:i({createElement:t,Fragment:r}),g=null!==(l=e.fallbackComponent)&&void 0!==l?l:function(){return null},O=null!==(f=e.headerComponent)&&void 0!==f?f:s({createElement:t,Fragment:r}),h=null!==(d=e.view)&&void 0!==d?d:u({createElement:t,Fragment:r});return y({classNames:p,Fallback:g,Header:O,recommendations:e.items,status:e.status,translations:b,View:function(r){return t(h,o({classNames:p,itemComponent:e.itemComponent,items:e.items,translations:b},r))}})}}({createElement:t.createElement,Fragment:t.Fragment});function A(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function q(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}e.FrequentlyBoughtTogether=function(e){var t=D(e),r=t.recommendations,a=t.status;return n.default.createElement(S,o({},e,{items:r,status:a}))},e.RelatedProducts=function(e){var t=k(e),r=t.recommendations,a=t.status;return n.default.createElement(F,o({},e,{items:r,status:a}))},e.useFrequentlyBoughtTogether=D,e.useRecommendations=function(e){var r=e.fallbackParameters,n=e.indexName,o=e.maxRecommendations,a=e.model,c=e.objectIDs,i=e.queryParameters,s=e.recommendClient,u=e.threshold,l=e.transformItems,m=b(t.useState({recommendations:[]}),2),f=m[0],d=m[1],p=P("loading"),h=p.status,j=p.setStatus,w=v(c),E=v(l),D=v(i),x=v(r);return O({recommendClient:s}),t.useEffect((function(){j("loading"),function(e){var t=e.objectIDs,r=e.recommendClient,n=e.transformItems,o=void 0===n?function(e){return e}:n,a=e.fallbackParameters,c=e.indexName,i=e.maxRecommendations,s=e.model,u=e.queryParameters,l=e.threshold,m=t.map((function(e){return{fallbackParameters:a,indexName:c,maxRecommendations:i,model:s,objectID:e,queryParameters:u,threshold:l}}));return r.addAlgoliaAgent("recommend-core",g),r.getRecommendations(m).then((function(e){return y({maxRecommendations:i,response:e})})).then((function(e){return{recommendations:o(e)}}))}({fallbackParameters:x,indexName:n,maxRecommendations:o,model:a,objectIDs:w,queryParameters:D,recommendClient:s,threshold:u,transformItems:E}).then((function(e){d(e),j("idle")}))}),[x,n,o,a,w,D,s,j,u,E]),q(q({},f),{},{status:h})},e.useRelatedProducts=k,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.js.map
{
"name": "@algolia/recommend-react",
"description": "Horizontal slider UI component.",
"version": "1.0.0",
"version": "1.1.0",
"license": "MIT",
"homepage": "https://github.com/algolia/ui-components",
"repository": "algolia/ui-components",
"homepage": "https://github.com/algolia/recommend",
"repository": "algolia/recommend",
"author": {

@@ -32,7 +32,8 @@ "name": "Algolia, Inc.",

"dependencies": {
"@algolia/recommend-core": "1.0.0",
"@algolia/recommend-vdom": "1.0.0"
"@algolia/recommend-core": "1.1.0",
"@algolia/recommend-vdom": "1.1.0",
"dequal": "^2.0.0"
},
"peerDependencies": {
"@algolia/recommend": "^4.10.2",
"@algolia/recommend": "^4.10.5",
"react": ">= 16.8.0 < 18",

@@ -39,0 +40,0 @@ "react-dom": ">= 16.8.0 < 18"

@@ -7,3 +7,5 @@ # `@algolia/recommend-react`

```sh
All Recommend packages are available on the [npm](https://www.npmjs.com/) registry.
```bash
yarn add @algolia/recommend-react

@@ -14,28 +16,17 @@ # or

## `<RelatedProducts />`
## Usage
Component to display related products.
Import the [`FrequentlyBoughtTogether`](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-react/FrequentlyBoughtTogether/) and [`RelatedProducts`](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-react/RelatedProducts/) and use them in your parent component.
### Usage
#### Default view
```js
import { RelatedProducts } from '@algolia/recommend-react';
```JSX
import React from 'react';
import {
FrequentlyBoughtTogether,
RelatedProducts,
} from '@algolia/recommend-react';
import recommend from '@algolia/recommend';
const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
const recommendClient = recommend(appId, apiKey);
function RelatedItem({ item }) {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}
function App({ currentObjectID }) {

@@ -45,137 +36,27 @@ // ...

return (
<RelatedProducts
recommendClient={recommendClient}
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={RelatedItem}
/>
);
}
```
#### Horizontal slider view
Example with the [`HorizontalSlider`](/packages/horizontal-slider-react) UI component:
```js
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](#shared-props) and the following:
#### `itemComponent`
> `({ item }) => JSX.Element` | **required**
The product component to display.
#### `classNames`
<blockquote>
<details>
<summary><code>RelatedProductsClassNames</code></summary>
```ts
type RelatedProductsClassNames = Partial<{
root: string;
title: string;
container: string;
list: string;
item: string;
}>;
```
</details>
</blockquote>
The class names for the component.
#### `translations`
<blockquote>
<details>
<summary><code>RelatedProductTranslations</code></summary>
```ts
type RelatedProductTranslations = Partial<{
title: string;
showMore: string;
}>;
```
</details>
</blockquote>
The translations for the component.
</details>
#### `view`
<blockquote>
<details>
<summary><code>(props: ViewProps) => JSX.Element</code></summary>
```ts
type ViewProps<TItem extends RecordWithObjectID> = {
items: TItem[];
itemComponent({ item: TItem }): JSX.Element;
};
```
</details>
</blockquote>
The view component to render your items into. You can use the [`HorizontalSlider`](/packages/horizontal-slider-react) UI component.
The default implementation is:
```js
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>
<FrequentlyBoughtTogether
recommendClient={recommendClient}
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={({ item }) => {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}}
/>
<RelatedProducts
recommendClient={recommendClient}
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={({ item }) => {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}}
/>
</div>

@@ -186,496 +67,9 @@ );

#### `fallbackComponent`
Continue reading our [**Getting Started**](https://www.algolia.com/doc/ui-libraries/recommend/introduction/getting-started/?client=React) guide.
> `() => JSX.Element`
## Documentation
The fallback component to render when no recommendations are returned.
The [documentation](https://www.algolia.com/doc/doc/ui-libraries/recommend/introduction/what-is-recommend/) offers a few ways to learn about the Recommend library:
#### `children`
<blockquote>
<details>
<summary><code>(props: ChildrenProps) => JSX.Element</code></summary>
```ts
type ChildrenProps<TObject> = {
classNames: RecommendationClassNames;
recommendations: TObject[];
translations: Required<RecommendationTranslations>;
View(props: unknown): JSX.Element;
};
```
</details>
</blockquote>
Render function to modify the complete rendering.
The default implementation is:
```js
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 }`](#shared-props)
Hook to retrieve related products.
### Usage
```jsx
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](#shared-props).
## `<FrequentlyBoughtTogether />`
Component to display frequently bought together products.
### Usage
#### Default view
```js
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`](/packages/horizontal-slider-react) UI component:
```js
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](#shared-props) and the following:
#### `itemComponent`
> `({ item }) => JSX.Element` | **required**
The product component to display.
#### `classNames`
<blockquote>
<details>
<summary><code>FrequentlyBoughtTogetherClassNames</code></summary>
```ts
type FrequentlyBoughtTogetherClassNames = Partial<{
root: string;
title: string;
container: string;
list: string;
item: string;
}>;
```
</details>
</blockquote>
The class names for the component.
#### `translations`
<blockquote>
<details>
<summary><code>FrequentlyBoughtTogetherTranslations</code></summary>
```ts
type FrequentlyBoughtTogetherTranslations = Partial<{
title: string;
showMore: string;
}>;
```
</details>
</blockquote>
The translations for the component.
#### `view`
<blockquote>
<details>
<summary><code>(props: ViewProps) => JSX.Element</code></summary>
```ts
type ViewProps<TItem extends RecordWithObjectID> = {
items: TItem[];
itemComponent({ item: TItem }): JSX.Element;
};
```
</details>
</blockquote>
The view component to render your items into. You can use the [`HorizontalSlider`](/packages/horizontal-slider-react) UI component.
The default implementation is:
```js
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 />`](#relatedproducts-) fallback:
```js
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`
<blockquote>
<details>
<summary><code>(props: ChildrenProps) => JSX.Element</code></summary>
```ts
type ChildrenProps<TObject> = {
classNames: RecommendationClassNames;
recommendations: TObject[];
translations: Required<RecommendationTranslations>;
View(props: unknown): JSX.Element;
};
```
</details>
</blockquote>
Render function to modify the complete rendering.
The default implementation is:
```js
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 }`](#shared-props)
Hook to retrieve frequently bought together products.
### Usage
```jsx
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](#shared-props).
## `useRecommendations`
> [`(props: SharedProps & { model: RecommendationModel }) => { recommendations }`](#shared-props)
Generic hook to retrieve hits from an AI model.
### Usage
```jsx
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](#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 `objectID`s 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`](https://www.algolia.com/doc/api-reference/search-api-parameters/) | defaults to `{ analytics: false, enableABTest: false }`
List of [search parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/) to send.
### `transformItems`
<blockquote>
<details>
<summary><code>(Array&lt;RecordWithObjectID&lt;TItem>>) => Array&lt;RecordWithObjectID&lt;TItem>></code></summary>
```ts
type RecordWithObjectID<TItem> = TItem & {
objectID: string;
};
```
</details>
</blockquote>
Function to transform the items retrieved by Algolia. It's useful to edit, add, remove or reorder them.
- Follow the [**Building your Recommend UI guide**](https://www.algolia.com/doc/guides/algolia-ai/recommend/?client=react#building-your-recommendation-ui) to display recommendations on your website.
- Refer to the [**API reference**](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-react/) for a comprehensive list of parameters and options.

Sorry, the diff of this file is not supported yet

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