@nosto/nosto-react 0.1.11 → 0.2.1

package/dist/index.es.client.js

@@ -2,7 +2,8 @@ import * as React from "react";
 import React__default, { createContext, useContext, useEffect } from "react";
 const NostoContext = createContext({
   account: void 0,
-  currentVariation: ""
+  currentVariation: "",
+  renderFunction: void 0
 });
 function useNostoContext() {
   const context = useContext(NostoContext);
@@ -47,17 +48,23 @@ const Fragment = jsxRuntime.exports.Fragment;
 const NostoFohofo = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewNotFound().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -71,17 +78,23 @@ const NostoFohofo = () => {
 const NostoOther = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewOther().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -95,17 +108,23 @@ const NostoOther = () => {
 const NostoCheckout = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewCart().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -122,15 +141,21 @@ const NostoProduct = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setResponseMode(responseMode).viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
-      }, [clientScriptLoaded, currentVariation, product]);
+      }, [clientScriptLoaded, currentVariation, product, renderFunction]);
     }
   });
   return /* @__PURE__ */ jsxs(Fragment, {
@@ -256,17 +281,23 @@ const NostoCategory = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewCategory(category).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
       });
     }
-  }, [clientScriptLoaded, category, currentVariation]);
+  }, [clientScriptLoaded, category, currentVariation, renderFunction]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -288,17 +319,23 @@ const NostoSearch = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewSearch(query).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, query]);
+  }, [clientScriptLoaded, currentVariation, query, renderFunction]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -341,17 +378,23 @@ const NostoOrder = ({
 }) => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).addOrder(snakeize(order)).setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -371,20 +414,23 @@ const NostoOrder = ({
 const NostoHome = () => {
   const {
     clientScriptLoaded,
-    currentVariation
+    currentVariation,
+    renderFunction,
+    responseMode
   } = useNostoContext();
   useEffect(() => {
-    if (currentVariation) {
-      console.log("currentVariation: ", currentVariation);
-    }
     if (clientScriptLoaded) {
       window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode("HTML").viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
-          api.placements.injectCampaigns(data.recommendations);
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewFrontPage().setPlacements(api.placements.getPlacements()).load().then((data) => {
+          if (responseMode == "HTML") {
+            api.placements.injectCampaigns(data.recommendations);
+          } else {
+            renderFunction(data.campaigns);
+          }
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -398,18 +444,8 @@ const NostoHome = () => {
 const NostoPlacement = ({
   id
 }) => {
-  const handleClick = (e) => {
-    const targetLink = e.target.closest("a");
-    if (!targetLink) {
-      return;
-    } else {
-      e.preventDefault();
-      location.href = targetLink.href.toString().replace(new URL(targetLink.href).origin, "");
-    }
-  };
   return /* @__PURE__ */ jsx("div", {
     className: "nosto_element",
-    onClick: handleClick,
     id
   });
 };
@@ -418,10 +454,12 @@ const NostoProvider = ({
   currentVariation = "",
   multiCurrency = false,
   host,
-  children
+  children,
+  renderFunction
 }) => {
   const [clientScriptLoadedState, setClientScriptLoadedState] = React__default.useState(false);
   const clientScriptLoaded = React__default.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
+  const responseMode = typeof renderFunction == "function" ? "JSON_ORIGINAL" : "HTML";
   currentVariation = multiCurrency ? currentVariation : "";
   useEffect(() => {
     if (!document.querySelectorAll("[nosto-client-script]").length) {
@@ -443,7 +481,9 @@ const NostoProvider = ({
     value: {
       account,
       clientScriptLoaded,
-      currentVariation
+      currentVariation,
+      renderFunction,
+      responseMode
     },
     children
   });

package/dist/index.umd.client.js

@@ -1,4 +1,4 @@
-(function(l,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(l=typeof globalThis!="undefined"?globalThis:l||self,i(l["@nosto/nosto-react"]={},l.React))})(this,function(l,i){"use strict";function L(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function O(t){if(t&&t.__esModule)return t;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(n){if(n!=="default"){var r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:function(){return t[n]}})}}),e.default=t,Object.freeze(e)}var _=L(i),h=O(i);const v=i.createContext({account:void 0,currentVariation:""});function a(){const t=i.useContext(v);if(!t)throw new Error("No nosto context found");return t}var y={exports:{}},N={};/**
+(function(i,d){typeof exports=="object"&&typeof module!="undefined"?d(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],d):(i=typeof globalThis!="undefined"?globalThis:i||self,d(i["@nosto/nosto-react"]={},i.React))})(this,function(i,d){"use strict";function O(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}function F(s){if(s&&s.__esModule)return s;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return s&&Object.keys(s).forEach(function(r){if(r!=="default"){var n=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:function(){return s[r]}})}}),e.default=s,Object.freeze(e)}var w=O(d),N=F(d);const S=d.createContext({account:void 0,currentVariation:"",renderFunction:void 0});function p(){const s=d.useContext(S);if(!s)throw new Error("No nosto context found");return s}var _={exports:{}},v={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var M=_.default,E=Symbol.for("react.element"),V=Symbol.for("react.fragment"),T=Object.prototype.hasOwnProperty,F=M.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,x={key:!0,ref:!0,__self:!0,__source:!0};function C(t,e,n){var r,s={},c=null,d=null;n!==void 0&&(c=""+n),e.key!==void 0&&(c=""+e.key),e.ref!==void 0&&(d=e.ref);for(r in e)T.call(e,r)&&!x.hasOwnProperty(r)&&(s[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)s[r]===void 0&&(s[r]=e[r]);return{$$typeof:E,type:t,key:c,ref:d,props:s,_owner:F.current}}N.Fragment=V,N.jsx=C,N.jsxs=C,y.exports=N;const o=y.exports.jsx,u=y.exports.jsxs,p=y.exports.Fragment,R=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewNotFound().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})},A=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewOther().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})},D=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewCart().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})},H=({product:t,tagging:e})=>{const{clientScriptLoaded:n,currentVariation:r}=a();return i.useEffect(()=>{n&&window.nostojs(s=>{s.defaultSession().setVariation(r).setResponseMode("HTML").viewProduct(t).setPlacements(s.placements.getPlacements()).load().then(c=>{s.placements.injectCampaigns(c.recommendations)})},[n,r,t])}),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),u("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&o("span",{className:"variation_id",children:e.variationId}),t&&o("span",{className:"product_id",children:t}),(e==null?void 0:e.name)&&o("span",{className:"name",children:e.name}),(e==null?void 0:e.url)&&o("span",{className:"url",children:e.url.toString()}),(e==null?void 0:e.imageUrl)&&o("span",{className:"image_url",children:e.imageUrl.toString()}),(e==null?void 0:e.availability)&&o("span",{className:"availability",children:e.availability}),(e==null?void 0:e.price)&&o("span",{className:"price",children:e.price}),(e==null?void 0:e.listPrice)&&o("span",{className:"list_price",children:e.listPrice}),(e==null?void 0:e.priceCurrencyCode)&&o("span",{className:"price_currency_code",children:e.priceCurrencyCode}),(e==null?void 0:e.brand)&&o("span",{className:"brand",children:e.brand}),(e==null?void 0:e.description)&&o("span",{className:"description",children:e.description}),(e==null?void 0:e.googleCategory)&&o("span",{className:"description",children:e.googleCategory}),(e==null?void 0:e.condition)&&o("span",{className:"condition",children:e.condition}),(e==null?void 0:e.gender)&&o("span",{className:"gender",children:e.gender}),(e==null?void 0:e.ageGroup)&&o("span",{className:"age_group",children:e.ageGroup}),(e==null?void 0:e.gtin)&&o("span",{className:"gtin",children:e.gtin}),(e==null?void 0:e.category)&&(e==null?void 0:e.category.map((s,c)=>o("span",{className:"category",children:s},c))),(e==null?void 0:e.tags1)&&e.tags1.map((s,c)=>o("span",{className:"tag1",children:s},c)),(e==null?void 0:e.tags2)&&e.tags2.map((s,c)=>o("span",{className:"tag2",children:s},c)),(e==null?void 0:e.tags3)&&e.tags3.map((s,c)=>o("span",{className:"tag3",children:s},c)),(e==null?void 0:e.ratingValue)&&o("span",{className:"rating_value",children:e.ratingValue}),(e==null?void 0:e.reviewCount)&&o("span",{className:"review_count",children:e.reviewCount}),(e==null?void 0:e.alternateImageUrls)&&e.alternateImageUrls.map((s,c)=>o("span",{className:"alternate_image_url",children:s.toString()},c)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((s,c)=>e.customFields&&e.customFields[s]&&o("span",{className:s,children:e.customFields[s]},c)),(e==null?void 0:e.skus)&&e.skus.map((s,c)=>u("span",{className:"nosto_sku",children:[(s==null?void 0:s.id)&&o("span",{className:"product_id",children:s.id}),(s==null?void 0:s.name)&&o("span",{className:"name",children:s.name}),(s==null?void 0:s.price)&&o("span",{className:"price",children:s.price}),(s==null?void 0:s.listPrice)&&o("span",{className:"list_price",children:s.listPrice}),(s==null?void 0:s.url)&&o("span",{className:"url",children:s.url.toString()}),(s==null?void 0:s.imageUrl)&&o("span",{className:"image_url",children:s.imageUrl.toString()}),(s==null?void 0:s.gtin)&&o("span",{className:"gtin",children:s.gtin}),(s==null?void 0:s.availability)&&o("span",{className:"availability",children:s.availability}),(s==null?void 0:s.customFields)&&Object.keys(s.customFields).map((d,S)=>s.customFields&&s.customFields[d]&&o("span",{className:d,children:s.customFields[d]},S))]},c))]})]})},U=({category:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewCategory(t).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,t,n]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),o("div",{className:"nosto_category",style:{display:"none"},children:t})]})},b=({query:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").viewSearch(t).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,n,t]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),o("div",{className:"nosto_search",style:{display:"none"},children:t})]})};var w=function t(e){return!e||typeof e!="object"||I(e)||z(e)?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(function(n,r){var s=r[0].toLowerCase()+r.slice(1).replace(/([A-Z]+)/g,function(c,d){return"_"+d.toLowerCase()});return n[s]=t(e[r]),n},{})},I=function(t){return Object.prototype.toString.call(t)==="[object Date]"},z=function(t){return Object.prototype.toString.call(t)==="[object RegExp]"};const q=({order:t})=>{const{clientScriptLoaded:e,currentVariation:n}=a();return i.useEffect(()=>{e&&window.nostojs(r=>{r.defaultSession().setVariation(n).setResponseMode("HTML").addOrder(w(t)).setPlacements(r.placements.getPlacements()).load().then(s=>{r.placements.injectCampaigns(s.recommendations)})})},[e,n]),u(p,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),o("div",{className:"nosto_order",style:{display:"none"},children:t.purchase.number})]})},B=()=>{const{clientScriptLoaded:t,currentVariation:e}=a();return i.useEffect(()=>{e&&console.log("currentVariation: ",e),t&&window.nostojs(n=>{n.defaultSession().setVariation(e).setResponseMode("HTML").viewFrontPage().setPlacements(n.placements.getPlacements()).load().then(r=>{n.placements.injectCampaigns(r.recommendations)})})},[t,e]),o(p,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},G=({id:t})=>o("div",{className:"nosto_element",onClick:n=>{const r=n.target.closest("a");if(r)n.preventDefault(),location.href=r.href.toString().replace(new URL(r.href).origin,"");else return},id:t}),$=({account:t,currentVariation:e="",multiCurrency:n=!1,host:r,children:s})=>{const[c,d]=_.default.useState(!1),S=_.default.useMemo(()=>c,[c]);return e=n?e:"",i.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const m=document.createElement("script");m.type="text/javascript",m.src="//"+(r||"connect.nosto.com")+"/include/"+t,m.async=!0,m.setAttribute("nosto-client-script",""),m.onload=()=>{console.log("Nosto client script loaded"),d(!0)},document.head.appendChild(m)}window.nostojs=m=>(window.nostojs.q=window.nostojs.q||[]).push(m),window.nostojs(m=>m.setAutoLoad(!1))},[]),o(v.Provider,{value:{account:t,clientScriptLoaded:S,currentVariation:e},children:s})};var j=Object.prototype.hasOwnProperty;function P(t,e,n){for(n of t.keys())if(f(n,e))return n}function f(t,e){var n,r,s;if(t===e)return!0;if(t&&e&&(n=t.constructor)===e.constructor){if(n===Date)return t.getTime()===e.getTime();if(n===RegExp)return t.toString()===e.toString();if(n===Array){if((r=t.length)===e.length)for(;r--&&f(t[r],e[r]););return r===-1}if(n===Set){if(t.size!==e.size)return!1;for(r of t)if(s=r,s&&typeof s=="object"&&(s=P(e,s),!s)||!e.has(s))return!1;return!0}if(n===Map){if(t.size!==e.size)return!1;for(r of t)if(s=r[0],s&&typeof s=="object"&&(s=P(e,s),!s)||!f(r[1],e.get(s)))return!1;return!0}if(n===ArrayBuffer)t=new Uint8Array(t),e=new Uint8Array(e);else if(n===DataView){if((r=t.byteLength)===e.byteLength)for(;r--&&t.getInt8(r)===e.getInt8(r););return r===-1}if(ArrayBuffer.isView(t)){if((r=t.byteLength)===e.byteLength)for(;r--&&t[r]===e[r];);return r===-1}if(!n||typeof t=="object"){r=0;for(n in t)if(j.call(t,n)&&++r&&!j.call(e,n)||!(n in e)||!f(t[n],e[n]))return!1;return Object.keys(e).length===r}}return t!==t&&e!==e}function J(t){var e=h.useRef(t),n=h.useRef(0);return f(t,e.current)||(e.current=t,n.current+=1),h.useMemo(function(){return e.current},[n.current])}function W(t,e){return h.useEffect(t,J(e))}const Y=({cart:t,customer:e})=>{const{clientScriptLoaded:n}=a();return W(()=>{const r=t?w(t):void 0,s=e?w(e):void 0;n&&window.nostojs(c=>{c.defaultSession().setResponseMode("HTML").setCart(r).setCustomer(s).viewOther().load()})},[n,t||[],e||{}]),o(p,{})};l.Nosto404=R,l.NostoCategory=U,l.NostoCheckout=D,l.NostoContext=v,l.NostoHome=B,l.NostoOrder=q,l.NostoOther=A,l.NostoPlacement=G,l.NostoProduct=H,l.NostoProvider=$,l.NostoSearch=b,l.NostoSession=Y,l.useNostoContext=a,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */var E=w.default,T=Symbol.for("react.element"),V=Symbol.for("react.fragment"),x=Object.prototype.hasOwnProperty,R=E.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,A={key:!0,ref:!0,__self:!0,__source:!0};function P(s,e,r){var n,o={},l=null,t=null;r!==void 0&&(l=""+r),e.key!==void 0&&(l=""+e.key),e.ref!==void 0&&(t=e.ref);for(n in e)x.call(e,n)&&!A.hasOwnProperty(n)&&(o[n]=e[n]);if(s&&s.defaultProps)for(n in e=s.defaultProps,e)o[n]===void 0&&(o[n]=e[n]);return{$$typeof:T,type:s,key:l,ref:t,props:o,_owner:R.current}}v.Fragment=V,v.jsx=P,v.jsxs=P,_.exports=v;const c=_.exports.jsx,f=_.exports.jsxs,u=_.exports.Fragment,H=()=>{const{clientScriptLoaded:s,currentVariation:e,renderFunction:r,responseMode:n}=p();return d.useEffect(()=>{s&&window.nostojs(o=>{o.defaultSession().setVariation(e).setResponseMode(n).viewNotFound().setPlacements(o.placements.getPlacements()).load().then(l=>{n=="HTML"?o.placements.injectCampaigns(l.recommendations):r(l.campaigns)})})},[s,e,r]),c(u,{children:c("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})},I=()=>{const{clientScriptLoaded:s,currentVariation:e,renderFunction:r,responseMode:n}=p();return d.useEffect(()=>{s&&window.nostojs(o=>{o.defaultSession().setVariation(e).setResponseMode(n).viewOther().setPlacements(o.placements.getPlacements()).load().then(l=>{n=="HTML"?o.placements.injectCampaigns(l.recommendations):r(l.campaigns)})})},[s,e,r]),c(u,{children:c("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})},D=()=>{const{clientScriptLoaded:s,currentVariation:e,renderFunction:r,responseMode:n}=p();return d.useEffect(()=>{s&&window.nostojs(o=>{o.defaultSession().setVariation(e).setResponseMode(n).viewCart().setPlacements(o.placements.getPlacements()).load().then(l=>{n=="HTML"?o.placements.injectCampaigns(l.recommendations):r(l.campaigns)})})},[s,e,r]),c(u,{children:c("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})},U=({product:s,tagging:e})=>{const{clientScriptLoaded:r,currentVariation:n,renderFunction:o,responseMode:l}=p();return d.useEffect(()=>{r&&window.nostojs(t=>{t.defaultSession().setResponseMode(l).viewProduct(s).setPlacements(t.placements.getPlacements()).load().then(a=>{l=="HTML"?t.placements.injectCampaigns(a.recommendations):o(a.campaigns)})},[r,n,s,o])}),f(u,{children:[c("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),f("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&c("span",{className:"variation_id",children:e.variationId}),s&&c("span",{className:"product_id",children:s}),(e==null?void 0:e.name)&&c("span",{className:"name",children:e.name}),(e==null?void 0:e.url)&&c("span",{className:"url",children:e.url.toString()}),(e==null?void 0:e.imageUrl)&&c("span",{className:"image_url",children:e.imageUrl.toString()}),(e==null?void 0:e.availability)&&c("span",{className:"availability",children:e.availability}),(e==null?void 0:e.price)&&c("span",{className:"price",children:e.price}),(e==null?void 0:e.listPrice)&&c("span",{className:"list_price",children:e.listPrice}),(e==null?void 0:e.priceCurrencyCode)&&c("span",{className:"price_currency_code",children:e.priceCurrencyCode}),(e==null?void 0:e.brand)&&c("span",{className:"brand",children:e.brand}),(e==null?void 0:e.description)&&c("span",{className:"description",children:e.description}),(e==null?void 0:e.googleCategory)&&c("span",{className:"description",children:e.googleCategory}),(e==null?void 0:e.condition)&&c("span",{className:"condition",children:e.condition}),(e==null?void 0:e.gender)&&c("span",{className:"gender",children:e.gender}),(e==null?void 0:e.ageGroup)&&c("span",{className:"age_group",children:e.ageGroup}),(e==null?void 0:e.gtin)&&c("span",{className:"gtin",children:e.gtin}),(e==null?void 0:e.category)&&(e==null?void 0:e.category.map((t,a)=>c("span",{className:"category",children:t},a))),(e==null?void 0:e.tags1)&&e.tags1.map((t,a)=>c("span",{className:"tag1",children:t},a)),(e==null?void 0:e.tags2)&&e.tags2.map((t,a)=>c("span",{className:"tag2",children:t},a)),(e==null?void 0:e.tags3)&&e.tags3.map((t,a)=>c("span",{className:"tag3",children:t},a)),(e==null?void 0:e.ratingValue)&&c("span",{className:"rating_value",children:e.ratingValue}),(e==null?void 0:e.reviewCount)&&c("span",{className:"review_count",children:e.reviewCount}),(e==null?void 0:e.alternateImageUrls)&&e.alternateImageUrls.map((t,a)=>c("span",{className:"alternate_image_url",children:t.toString()},a)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((t,a)=>e.customFields&&e.customFields[t]&&c("span",{className:t,children:e.customFields[t]},a)),(e==null?void 0:e.skus)&&e.skus.map((t,a)=>f("span",{className:"nosto_sku",children:[(t==null?void 0:t.id)&&c("span",{className:"product_id",children:t.id}),(t==null?void 0:t.name)&&c("span",{className:"name",children:t.name}),(t==null?void 0:t.price)&&c("span",{className:"price",children:t.price}),(t==null?void 0:t.listPrice)&&c("span",{className:"list_price",children:t.listPrice}),(t==null?void 0:t.url)&&c("span",{className:"url",children:t.url.toString()}),(t==null?void 0:t.imageUrl)&&c("span",{className:"image_url",children:t.imageUrl.toString()}),(t==null?void 0:t.gtin)&&c("span",{className:"gtin",children:t.gtin}),(t==null?void 0:t.availability)&&c("span",{className:"availability",children:t.availability}),(t==null?void 0:t.customFields)&&Object.keys(t.customFields).map((y,C)=>t.customFields&&t.customFields[y]&&c("span",{className:y,children:t.customFields[y]},C))]},a))]})]})},b=({category:s})=>{const{clientScriptLoaded:e,currentVariation:r,renderFunction:n,responseMode:o}=p();return d.useEffect(()=>{e&&window.nostojs(l=>{l.defaultSession().setVariation(r).setResponseMode(o).viewCategory(s).setPlacements(l.placements.getPlacements()).load().then(t=>{o=="HTML"?l.placements.injectCampaigns(t.recommendations):n(t.campaigns)})})},[e,s,r,n]),f(u,{children:[c("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),c("div",{className:"nosto_category",style:{display:"none"},children:s})]})},z=({query:s})=>{const{clientScriptLoaded:e,currentVariation:r,renderFunction:n,responseMode:o}=p();return d.useEffect(()=>{e&&window.nostojs(l=>{l.defaultSession().setVariation(r).setResponseMode(o).viewSearch(s).setPlacements(l.placements.getPlacements()).load().then(t=>{o=="HTML"?l.placements.injectCampaigns(t.recommendations):n(t.campaigns)})})},[e,r,s,n]),f(u,{children:[c("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),c("div",{className:"nosto_search",style:{display:"none"},children:s})]})};var j=function s(e){return!e||typeof e!="object"||q(e)||B(e)?e:Array.isArray(e)?e.map(s):Object.keys(e).reduce(function(r,n){var o=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,function(l,t){return"_"+t.toLowerCase()});return r[o]=s(e[n]),r},{})},q=function(s){return Object.prototype.toString.call(s)==="[object Date]"},B=function(s){return Object.prototype.toString.call(s)==="[object RegExp]"};const G=({order:s})=>{const{clientScriptLoaded:e,currentVariation:r,renderFunction:n,responseMode:o}=p();return d.useEffect(()=>{e&&window.nostojs(l=>{l.defaultSession().setVariation(r).setResponseMode(o).addOrder(j(s)).setPlacements(l.placements.getPlacements()).load().then(t=>{o=="HTML"?l.placements.injectCampaigns(t.recommendations):n(t.campaigns)})})},[e,r,n]),f(u,{children:[c("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),c("div",{className:"nosto_order",style:{display:"none"},children:s.purchase.number})]})},J=()=>{const{clientScriptLoaded:s,currentVariation:e,renderFunction:r,responseMode:n}=p();return d.useEffect(()=>{s&&window.nostojs(o=>{o.defaultSession().setVariation(e).setResponseMode(n).viewFrontPage().setPlacements(o.placements.getPlacements()).load().then(l=>{n=="HTML"?o.placements.injectCampaigns(l.recommendations):r(l.campaigns)})})},[s,e,r]),c(u,{children:c("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},$=({id:s})=>c("div",{className:"nosto_element",id:s}),W=({account:s,currentVariation:e="",multiCurrency:r=!1,host:n,children:o,renderFunction:l})=>{const[t,a]=w.default.useState(!1),y=w.default.useMemo(()=>t,[t]),C=typeof l=="function"?"JSON_ORIGINAL":"HTML";return e=r?e:"",d.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const m=document.createElement("script");m.type="text/javascript",m.src="//"+(n||"connect.nosto.com")+"/include/"+s,m.async=!0,m.setAttribute("nosto-client-script",""),m.onload=()=>{console.log("Nosto client script loaded"),a(!0)},document.head.appendChild(m)}window.nostojs=m=>(window.nostojs.q=window.nostojs.q||[]).push(m),window.nostojs(m=>m.setAutoLoad(!1))},[]),c(S.Provider,{value:{account:s,clientScriptLoaded:y,currentVariation:e,renderFunction:l,responseMode:C},children:o})};var M=Object.prototype.hasOwnProperty;function L(s,e,r){for(r of s.keys())if(h(r,e))return r}function h(s,e){var r,n,o;if(s===e)return!0;if(s&&e&&(r=s.constructor)===e.constructor){if(r===Date)return s.getTime()===e.getTime();if(r===RegExp)return s.toString()===e.toString();if(r===Array){if((n=s.length)===e.length)for(;n--&&h(s[n],e[n]););return n===-1}if(r===Set){if(s.size!==e.size)return!1;for(n of s)if(o=n,o&&typeof o=="object"&&(o=L(e,o),!o)||!e.has(o))return!1;return!0}if(r===Map){if(s.size!==e.size)return!1;for(n of s)if(o=n[0],o&&typeof o=="object"&&(o=L(e,o),!o)||!h(n[1],e.get(o)))return!1;return!0}if(r===ArrayBuffer)s=new Uint8Array(s),e=new Uint8Array(e);else if(r===DataView){if((n=s.byteLength)===e.byteLength)for(;n--&&s.getInt8(n)===e.getInt8(n););return n===-1}if(ArrayBuffer.isView(s)){if((n=s.byteLength)===e.byteLength)for(;n--&&s[n]===e[n];);return n===-1}if(!r||typeof s=="object"){n=0;for(r in s)if(M.call(s,r)&&++n&&!M.call(e,r)||!(r in e)||!h(s[r],e[r]))return!1;return Object.keys(e).length===n}}return s!==s&&e!==e}function Y(s){var e=N.useRef(s),r=N.useRef(0);return h(s,e.current)||(e.current=s,r.current+=1),N.useMemo(function(){return e.current},[r.current])}function Z(s,e){return N.useEffect(s,Y(e))}const K=({cart:s,customer:e})=>{const{clientScriptLoaded:r}=p();return Z(()=>{const n=s?j(s):void 0,o=e?j(e):void 0;r&&window.nostojs(l=>{l.defaultSession().setResponseMode("HTML").setCart(n).setCustomer(o).viewOther().load()})},[r,s||[],e||{}]),c(u,{})};i.Nosto404=H,i.NostoCategory=b,i.NostoCheckout=D,i.NostoContext=S,i.NostoHome=J,i.NostoOrder=G,i.NostoOther=I,i.NostoPlacement=$,i.NostoProduct=U,i.NostoProvider=W,i.NostoSearch=z,i.NostoSession=K,i.useNostoContext=p,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nosto/nosto-react",
   "description": "Component library to simply implementing Nosto on React.",
-  "version": "0.1.11",
+  "version": "0.2.1",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {

package/src/components/Category/index.client.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
@@ -10,17 +12,22 @@ const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewCategory(category)
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            if (responseMode == "HTML") {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            } else {
+              // @ts-ignore
+              renderFunction(data.campaigns);
+            }
           });
       });
     }
-  }, [clientScriptLoaded, category, currentVariation]);
+  }, [clientScriptLoaded, category, currentVariation, renderFunction]);
 
   return (
     <>

package/src/components/Checkout/index.client.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoCheckout: React.FC = () => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
@@ -10,17 +12,22 @@ const NostoCheckout: React.FC = () => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewCart()
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            if (responseMode == "HTML") {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            } else {
+              // @ts-ignore
+              renderFunction(data.campaigns);
+            }
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
 
   return (
     <>

package/src/components/Fohofo/index.client.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoFohofo: React.FC = () => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
@@ -10,17 +12,22 @@ const NostoFohofo: React.FC = () => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewNotFound()
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            if (responseMode == "HTML") {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            } else {
+              // @ts-ignore
+              renderFunction(data.campaigns);
+            }
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
 
   return (
     <>

package/src/components/Home/index.client.tsx

@@ -2,28 +2,32 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoHome: React.FC = () => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
-    if (currentVariation) {
-      console.log("currentVariation: ", currentVariation);
-    }
     // @ts-ignore
     if (clientScriptLoaded) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewFrontPage()
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            if (responseMode == "HTML") {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            } else {
+              // @ts-ignore
+              renderFunction(data.campaigns);
+            }
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
 
   return (
     <>

package/src/components/Order/index.client.tsx

@@ -8,7 +8,9 @@ export interface OrderProps {
 }
 
 const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
@@ -16,17 +18,22 @@ const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .addOrder(snakeize(order))
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            if (responseMode == "HTML") {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            } else {
+              // @ts-ignore
+              renderFunction(data.campaigns);
+            }
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
 
   return (
     <>

package/src/components/Other/index.client.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoOther: React.FC = () => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
@@ -10,17 +12,22 @@ const NostoOther: React.FC = () => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewOther()
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            if (responseMode == "HTML") {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            } else {
+              // @ts-ignore
+              renderFunction(data.campaigns);
+            }
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation]);
+  }, [clientScriptLoaded, currentVariation, renderFunction]);
 
   return (
     <>

package/src/components/Placement/index.client.tsx

@@ -1,25 +1,11 @@
-import React, { MouseEvent } from "react";
+import React from "react";
 
 export interface PlacementProps {
   id: string;
 }
 
 const NostoPlacement: React.FC<PlacementProps> = ({ id }) => {
-  const handleClick = (e: MouseEvent) => {
-    // noinspection TypeScriptUnresolvedFunction
-    // @ts-ignore
-    const targetLink = e.target.closest("a");
-    if (!targetLink) {
-      return;
-    } else {
-      e.preventDefault();
-      location.href = targetLink.href
-        .toString()
-        .replace(new URL(targetLink.href).origin, "");
-    }
-  };
-
-  return <div className="nosto_element" onClick={handleClick} id={id} />;
+  return <div className="nosto_element" id={id} />;
 };
 
 export default NostoPlacement;

package/src/components/Product/index.client.tsx

@@ -6,7 +6,9 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
   product,
   tagging,
 }) => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
@@ -14,17 +16,21 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
         (api: any) => {
           api
             .defaultSession()
-            .setVariation(currentVariation)
-            .setResponseMode("HTML")
+            .setResponseMode(responseMode)
             .viewProduct(product)
             .setPlacements(api.placements.getPlacements())
             .load()
             .then((data: object) => {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
+              if (responseMode == "HTML") {
+                // @ts-ignore
+                api.placements.injectCampaigns(data.recommendations);
+              } else {
+                // @ts-ignore
+                renderFunction(data.campaigns);
+              }
             });
         },
-        [clientScriptLoaded, currentVariation, product]
+        [clientScriptLoaded, currentVariation, product, renderFunction]
       );
     }
   });

package/src/components/Provider/context.client.ts

@@ -4,6 +4,8 @@ export interface NostoInterface {
   account: string;
   clientScriptLoaded: boolean;
   currentVariation: string;
+  renderFunction?: Function;
+  responseMode: string;
 }
 
 /* tslint:disable:no-empty */
@@ -11,6 +13,7 @@ export const NostoContext = createContext<NostoInterface>({
   // @ts-ignore
   account: undefined,
   currentVariation: "",
+  renderFunction: undefined,
 });
 
 /* tslint:enable:no-empty */

package/src/components/Provider/index.client.tsx

@@ -7,6 +7,7 @@ interface NostoProviderProps {
   host: string;
   children: React.ReactElement;
   multiCurrency: boolean;
+  renderFunction?: Function;
 }
 
 const NostoProvider: React.FC<NostoProviderProps> = ({
@@ -15,6 +16,7 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
   multiCurrency = false,
   host,
   children,
+  renderFunction,
 }) => {
   const [clientScriptLoadedState, setClientScriptLoadedState] =
     React.useState(false);
@@ -23,6 +25,10 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
     [clientScriptLoadedState]
   );
 
+  //Set responseMode for loading campaigns:
+  const responseMode =
+    typeof renderFunction == "function" ? "JSON_ORIGINAL" : "HTML";
+
   //Pass currentVariation as empty string if multiCurrency is disabled
   currentVariation = multiCurrency ? currentVariation : "";
 
@@ -48,7 +54,13 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
 
   return (
     <NostoContext.Provider
-      value={{ account, clientScriptLoaded, currentVariation }}
+      value={{
+        account,
+        clientScriptLoaded,
+        currentVariation,
+        renderFunction,
+        responseMode,
+      }}
     >
       {children}
     </NostoContext.Provider>

package/src/components/Search/index.client.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
-  const { clientScriptLoaded, currentVariation } = useNostoContext();
+  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
+    useNostoContext();
+
   useEffect(() => {
     // @ts-ignore
     if (clientScriptLoaded) {
@@ -10,17 +12,22 @@ const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
         api
           .defaultSession()
           .setVariation(currentVariation)
-          .setResponseMode("HTML")
+          .setResponseMode(responseMode)
           .viewSearch(query)
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            // @ts-ignore
-            api.placements.injectCampaigns(data.recommendations);
+            if (responseMode == "HTML") {
+              // @ts-ignore
+              api.placements.injectCampaigns(data.recommendations);
+            } else {
+              // @ts-ignore
+              renderFunction(data.campaigns);
+            }
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation, query]);
+  }, [clientScriptLoaded, currentVariation, query, renderFunction]);
 
   return (
     <>