@nosto/nosto-react 0.2.1 → 0.3.0

package/dist/index.es.client.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React__default, { createContext, useContext, useEffect } from "react";
+import React__default, { createContext, useContext, useEffect, isValidElement, useState, useRef } from "react";
+import { createRoot } from "react-dom/client";
 const NostoContext = createContext({
   account: void 0,
   currentVariation: "",
@@ -49,22 +50,23 @@ const NostoFohofo = () => {
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("404");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -79,22 +81,23 @@ const NostoOther = () => {
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("other");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -109,22 +112,23 @@ const NostoCheckout = () => {
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("checkout");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -142,20 +146,21 @@ const NostoProduct = ({
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("product");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
-      }, [clientScriptLoaded, currentVariation, product, renderFunction]);
+      }, [clientScriptLoaded, currentVariation, product, recommendationComponent, pageTypeUpdated]);
     }
   });
   return /* @__PURE__ */ jsxs(Fragment, {
@@ -282,22 +287,23 @@ const NostoCategory = ({
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("home");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, category, currentVariation, renderFunction]);
+  }, [clientScriptLoaded, category, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -320,22 +326,23 @@ const NostoSearch = ({
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("search");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, query, renderFunction]);
+  }, [clientScriptLoaded, currentVariation, query, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -379,22 +386,23 @@ const NostoOrder = ({
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("order");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -415,22 +423,23 @@ const NostoHome = () => {
   const {
     clientScriptLoaded,
     currentVariation,
-    renderFunction,
-    responseMode
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns
   } = useNostoContext();
+  const {
+    renderCampaigns,
+    pageTypeUpdated
+  } = useRenderCampaigns("home");
   useEffect(() => {
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         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);
-          }
+          renderCampaigns(data, api);
         });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -442,12 +451,13 @@ const NostoHome = () => {
   });
 };
 const NostoPlacement = ({
-  id
+  id,
+  pageType
 }) => {
   return /* @__PURE__ */ jsx("div", {
     className: "nosto_element",
     id
-  });
+  }, id + pageType);
 };
 const NostoProvider = ({
   account,
@@ -455,12 +465,51 @@ const NostoProvider = ({
   multiCurrency = false,
   host,
   children,
-  renderFunction
+  recommendationComponent
 }) => {
   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 : "";
+  const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML";
+  function RecommendationComponentWrapper(props) {
+    return React__default.cloneElement(recommendationComponent, {
+      nostoRecommendation: props.nostoRecommendation
+    });
+  }
+  const [pageType, setPageType] = useState("");
+  const useRenderCampaigns = function(type = "") {
+    const placementRefs = useRef({});
+    useEffect(() => {
+      if (pageType != type) {
+        setPageType(type);
+      }
+    }, []);
+    const pageTypeUpdated = type == pageType;
+    function renderCampaigns(data, api) {
+      if (responseMode == "HTML") {
+        api.placements.injectCampaigns(data.recommendations);
+      } else {
+        const recommendations = data.campaigns.recommendations;
+        for (const key in recommendations) {
+          let recommendation = recommendations[key];
+          let placementSelector = "#" + key;
+          let placement = () => document.querySelector(placementSelector);
+          if (!!placement()) {
+            if (!placementRefs.current[key])
+              placementRefs.current[key] = createRoot(placement());
+            const root = placementRefs.current[key];
+            root.render(/* @__PURE__ */ jsx(RecommendationComponentWrapper, {
+              nostoRecommendation: recommendation
+            }));
+          }
+        }
+      }
+    }
+    return {
+      renderCampaigns,
+      pageTypeUpdated
+    };
+  };
   useEffect(() => {
     if (!document.querySelectorAll("[nosto-client-script]").length) {
       const script = document.createElement("script");
@@ -482,8 +531,10 @@ const NostoProvider = ({
       account,
       clientScriptLoaded,
       currentVariation,
-      renderFunction,
-      responseMode
+      responseMode,
+      recommendationComponent,
+      useRenderCampaigns,
+      pageType
     },
     children
   });

package/dist/index.umd.client.js

@@ -1,4 +1,4 @@
-(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={};/**
+(function(m,p){typeof exports=="object"&&typeof module!="undefined"?p(exports,require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react","react-dom/client"],p):(m=typeof globalThis!="undefined"?globalThis:m||self,p(m["@nosto/nosto-react"]={},m.React,m.ReactDOM))})(this,function(m,p,A){"use strict";function D(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}function I(t){if(t&&t.__esModule)return t;var e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return t&&Object.keys(t).forEach(function(r){if(r!=="default"){var n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:function(){return t[r]}})}}),e.default=t,Object.freeze(e)}var w=D(p),S=I(p);const O=p.createContext({account:void 0,currentVariation:"",renderFunction:void 0});function h(){const t=p.useContext(O);if(!t)throw new Error("No nosto context found");return t}var P={exports:{}},j={};/**
  * @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 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"}})});
+ */var b=w.default,z=Symbol.for("react.element"),q=Symbol.for("react.fragment"),H=Object.prototype.hasOwnProperty,B=b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,G={key:!0,ref:!0,__self:!0,__source:!0};function E(t,e,r){var n,c={},a=null,d=null;r!==void 0&&(a=""+r),e.key!==void 0&&(a=""+e.key),e.ref!==void 0&&(d=e.ref);for(n in e)H.call(e,n)&&!G.hasOwnProperty(n)&&(c[n]=e[n]);if(t&&t.defaultProps)for(n in e=t.defaultProps,e)c[n]===void 0&&(c[n]=e[n]);return{$$typeof:z,type:t,key:a,ref:d,props:c,_owner:B.current}}j.Fragment=q,j.jsx=E,j.jsxs=E,P.exports=j;const o=P.exports.jsx,_=P.exports.jsxs,y=P.exports.Fragment,J=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("404");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewNotFound().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})},W=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("other");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewOther().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})},$=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("checkout");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewCart().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})},Y=({product:t,tagging:e})=>{const{clientScriptLoaded:r,currentVariation:n,responseMode:c,recommendationComponent:a,useRenderCampaigns:d}=h(),{renderCampaigns:l,pageTypeUpdated:i}=d("product");return p.useEffect(()=>{r&&i&&window.nostojs(s=>{s.defaultSession().setResponseMode(c).viewProduct(t).setPlacements(s.placements.getPlacements()).load().then(u=>{l(u,s)})},[r,n,t,a,i])}),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),_("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,u)=>o("span",{className:"category",children:s},u))),(e==null?void 0:e.tags1)&&e.tags1.map((s,u)=>o("span",{className:"tag1",children:s},u)),(e==null?void 0:e.tags2)&&e.tags2.map((s,u)=>o("span",{className:"tag2",children:s},u)),(e==null?void 0:e.tags3)&&e.tags3.map((s,u)=>o("span",{className:"tag3",children:s},u)),(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,u)=>o("span",{className:"alternate_image_url",children:s.toString()},u)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((s,u)=>e.customFields&&e.customFields[s]&&o("span",{className:s,children:e.customFields[s]},u)),(e==null?void 0:e.skus)&&e.skus.map((s,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((N,L)=>s.customFields&&s.customFields[N]&&o("span",{className:N,children:s.customFields[N]},L))]},u))]})]})},Z=({category:t})=>{const{clientScriptLoaded:e,currentVariation:r,responseMode:n,recommendationComponent:c,useRenderCampaigns:a}=h(),{renderCampaigns:d,pageTypeUpdated:l}=a("home");return p.useEffect(()=>{e&&l&&window.nostojs(i=>{i.defaultSession().setVariation(r).setResponseMode(n).viewCategory(t).setPlacements(i.placements.getPlacements()).load().then(s=>{d(s,i)})})},[e,t,r,c,l]),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),o("div",{className:"nosto_category",style:{display:"none"},children:t})]})},K=({query:t})=>{const{clientScriptLoaded:e,currentVariation:r,responseMode:n,recommendationComponent:c,useRenderCampaigns:a}=h(),{renderCampaigns:d,pageTypeUpdated:l}=a("search");return p.useEffect(()=>{e&&l&&window.nostojs(i=>{i.defaultSession().setVariation(r).setResponseMode(n).viewSearch(t).setPlacements(i.placements.getPlacements()).load().then(s=>{d(s,i)})})},[e,r,t,c,l]),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),o("div",{className:"nosto_search",style:{display:"none"},children:t})]})};var M=function t(e){return!e||typeof e!="object"||Q(e)||X(e)?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(function(r,n){var c=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,function(a,d){return"_"+d.toLowerCase()});return r[c]=t(e[n]),r},{})},Q=function(t){return Object.prototype.toString.call(t)==="[object Date]"},X=function(t){return Object.prototype.toString.call(t)==="[object RegExp]"};const k=({order:t})=>{const{clientScriptLoaded:e,currentVariation:r,responseMode:n,recommendationComponent:c,useRenderCampaigns:a}=h(),{renderCampaigns:d,pageTypeUpdated:l}=a("order");return p.useEffect(()=>{e&&l&&window.nostojs(i=>{i.defaultSession().setVariation(r).setResponseMode(n).addOrder(M(t)).setPlacements(i.placements.getPlacements()).load().then(s=>{d(s,i)})})},[e,r,c,l]),_(y,{children:[o("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),o("div",{className:"nosto_order",style:{display:"none"},children:t.purchase.number})]})},g=()=>{const{clientScriptLoaded:t,currentVariation:e,responseMode:r,recommendationComponent:n,useRenderCampaigns:c}=h(),{renderCampaigns:a,pageTypeUpdated:d}=c("home");return p.useEffect(()=>{t&&d&&window.nostojs(l=>{l.defaultSession().setVariation(e).setResponseMode(r).viewFrontPage().setPlacements(l.placements.getPlacements()).load().then(i=>{a(i,l)})})},[t,e,n,d]),o(y,{children:o("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})},ee=({id:t,pageType:e})=>o("div",{className:"nosto_element",id:t},t+e),te=({account:t,currentVariation:e="",multiCurrency:r=!1,host:n,children:c,recommendationComponent:a})=>{const[d,l]=w.default.useState(!1),i=w.default.useMemo(()=>d,[d]);e=r?e:"";const s=p.isValidElement(a)?"JSON_ORIGINAL":"HTML";function u(f){return w.default.cloneElement(a,{nostoRecommendation:f.nostoRecommendation})}const[N,L]=p.useState(""),oe=function(f=""){const R=p.useRef({});p.useEffect(()=>{N!=f&&L(f)},[]);const ce=f==N;function le(V,de){if(s=="HTML")de.placements.injectCampaigns(V.recommendations);else{const F=V.campaigns.recommendations;for(const C in F){let ae=F[C],ie="#"+C,x=()=>document.querySelector(ie);x()&&(R.current[C]||(R.current[C]=A.createRoot(x())),R.current[C].render(o(u,{nostoRecommendation:ae})))}}}return{renderCampaigns:le,pageTypeUpdated:ce}};return p.useEffect(()=>{if(!document.querySelectorAll("[nosto-client-script]").length){const f=document.createElement("script");f.type="text/javascript",f.src="//"+(n||"connect.nosto.com")+"/include/"+t,f.async=!0,f.setAttribute("nosto-client-script",""),f.onload=()=>{console.log("Nosto client script loaded"),l(!0)},document.head.appendChild(f)}window.nostojs=f=>(window.nostojs.q=window.nostojs.q||[]).push(f),window.nostojs(f=>f.setAutoLoad(!1))},[]),o(O.Provider,{value:{account:t,clientScriptLoaded:i,currentVariation:e,responseMode:s,recommendationComponent:a,useRenderCampaigns:oe,pageType:N},children:c})};var T=Object.prototype.hasOwnProperty;function U(t,e,r){for(r of t.keys())if(v(r,e))return r}function v(t,e){var r,n,c;if(t===e)return!0;if(t&&e&&(r=t.constructor)===e.constructor){if(r===Date)return t.getTime()===e.getTime();if(r===RegExp)return t.toString()===e.toString();if(r===Array){if((n=t.length)===e.length)for(;n--&&v(t[n],e[n]););return n===-1}if(r===Set){if(t.size!==e.size)return!1;for(n of t)if(c=n,c&&typeof c=="object"&&(c=U(e,c),!c)||!e.has(c))return!1;return!0}if(r===Map){if(t.size!==e.size)return!1;for(n of t)if(c=n[0],c&&typeof c=="object"&&(c=U(e,c),!c)||!v(n[1],e.get(c)))return!1;return!0}if(r===ArrayBuffer)t=new Uint8Array(t),e=new Uint8Array(e);else if(r===DataView){if((n=t.byteLength)===e.byteLength)for(;n--&&t.getInt8(n)===e.getInt8(n););return n===-1}if(ArrayBuffer.isView(t)){if((n=t.byteLength)===e.byteLength)for(;n--&&t[n]===e[n];);return n===-1}if(!r||typeof t=="object"){n=0;for(r in t)if(T.call(t,r)&&++n&&!T.call(e,r)||!(r in e)||!v(t[r],e[r]))return!1;return Object.keys(e).length===n}}return t!==t&&e!==e}function se(t){var e=S.useRef(t),r=S.useRef(0);return v(t,e.current)||(e.current=t,r.current+=1),S.useMemo(function(){return e.current},[r.current])}function ne(t,e){return S.useEffect(t,se(e))}const re=({cart:t,customer:e})=>{const{clientScriptLoaded:r}=h();return ne(()=>{const n=t?M(t):void 0,c=e?M(e):void 0;r&&window.nostojs(a=>{a.defaultSession().setResponseMode("HTML").setCart(n).setCustomer(c).viewOther().load()})},[r,t||[],e||{}]),o(y,{})};m.Nosto404=J,m.NostoCategory=Z,m.NostoCheckout=$,m.NostoContext=O,m.NostoHome=g,m.NostoOrder=k,m.NostoOther=W,m.NostoPlacement=ee,m.NostoProduct=Y,m.NostoProvider=te,m.NostoSearch=K,m.NostoSession=re,m.useNostoContext=h,Object.defineProperties(m,{__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.2.1",
+  "version": "0.3.0",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {

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

@@ -2,12 +2,19 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
@@ -17,17 +24,17 @@ const NostoCategory: React.FC<{ category: string }> = ({ category }) => {
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            if (responseMode == "HTML") {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
-            } else {
-              // @ts-ignore
-              renderFunction(data.campaigns);
-            }
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, category, currentVariation, renderFunction]);
+  }, [
+    clientScriptLoaded,
+    category,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -2,12 +2,19 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoCheckout: React.FC = () => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("checkout");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
@@ -17,17 +24,16 @@ const NostoCheckout: React.FC = () => {
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            if (responseMode == "HTML") {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
-            } else {
-              // @ts-ignore
-              renderFunction(data.campaigns);
-            }
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -2,12 +2,19 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoFohofo: React.FC = () => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("404");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
@@ -17,17 +24,16 @@ const NostoFohofo: React.FC = () => {
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            if (responseMode == "HTML") {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
-            } else {
-              // @ts-ignore
-              renderFunction(data.campaigns);
-            }
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -2,12 +2,19 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoHome: React.FC = () => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
@@ -17,17 +24,16 @@ const NostoHome: React.FC = () => {
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            if (responseMode == "HTML") {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
-            } else {
-              // @ts-ignore
-              renderFunction(data.campaigns);
-            }
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -8,12 +8,19 @@ export interface OrderProps {
 }
 
 const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("order");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
@@ -23,17 +30,16 @@ const NostoOrder: React.FC<{ order: OrderProps }> = ({ order }) => {
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            if (responseMode == "HTML") {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
-            } else {
-              // @ts-ignore
-              renderFunction(data.campaigns);
-            }
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -2,12 +2,19 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoOther: React.FC = () => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("other");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
@@ -17,17 +24,16 @@ const NostoOther: React.FC = () => {
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            if (responseMode == "HTML") {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
-            } else {
-              // @ts-ignore
-              renderFunction(data.campaigns);
-            }
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation, renderFunction]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -2,10 +2,11 @@ import React from "react";
 
 export interface PlacementProps {
   id: string;
+  pageType: string;
 }
 
-const NostoPlacement: React.FC<PlacementProps> = ({ id }) => {
-  return <div className="nosto_element" id={id} />;
+const NostoPlacement: React.FC<PlacementProps> = ({ id, pageType }) => {
+  return <div className="nosto_element" id={id} key={id + pageType} />;
 };
 
 export default NostoPlacement;

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

@@ -6,12 +6,19 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
   product,
   tagging,
 }) => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("product");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs(
         (api: any) => {
           api
@@ -21,16 +28,16 @@ const NostoProduct: React.FC<{ product: string; tagging: Product }> = ({
             .setPlacements(api.placements.getPlacements())
             .load()
             .then((data: object) => {
-              if (responseMode == "HTML") {
-                // @ts-ignore
-                api.placements.injectCampaigns(data.recommendations);
-              } else {
-                // @ts-ignore
-                renderFunction(data.campaigns);
-              }
+              renderCampaigns(data, api);
             });
         },
-        [clientScriptLoaded, currentVariation, product, renderFunction]
+        [
+          clientScriptLoaded,
+          currentVariation,
+          product,
+          recommendationComponent,
+          pageTypeUpdated,
+        ]
       );
     }
   });

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

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext, ReactComponentElement } from "react";
 
 export interface NostoInterface {
   account: string;
@@ -6,6 +6,9 @@ export interface NostoInterface {
   currentVariation: string;
   renderFunction?: Function;
   responseMode: string;
+  recommendationComponent?: any;
+  useRenderCampaigns: Function;
+  pageType: string;
 }
 
 /* tslint:disable:no-empty */

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

@@ -1,5 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useEffect, isValidElement, useState, useRef } from "react";
 import { NostoContext } from "./context.client";
+import { createRoot } from "react-dom/client";
 
 interface NostoProviderProps {
   account: string;
@@ -7,7 +8,7 @@ interface NostoProviderProps {
   host: string;
   children: React.ReactElement;
   multiCurrency: boolean;
-  renderFunction?: Function;
+  recommendationComponent?: any;
 }
 
 const NostoProvider: React.FC<NostoProviderProps> = ({
@@ -16,7 +17,7 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
   multiCurrency = false,
   host,
   children,
-  renderFunction,
+  recommendationComponent,
 }) => {
   const [clientScriptLoadedState, setClientScriptLoadedState] =
     React.useState(false);
@@ -25,13 +26,61 @@ 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 : "";
 
+  // Set responseMode for loading campaigns:
+  const responseMode = isValidElement(recommendationComponent)
+    ? "JSON_ORIGINAL"
+    : "HTML";
+
+  // RecommendationComponent for client-side rendering:
+  function RecommendationComponentWrapper(props: any) {
+    return React.cloneElement(recommendationComponent, {
+      nostoRecommendation: props.nostoRecommendation,
+    });
+  }
+
+  // custom hook for rendering campaigns (CSR/SSR):
+  const [pageType, setPageType] = useState("");
+  const useRenderCampaigns: any = function (type: string = "") {
+    const placementRefs: any = useRef({});
+    useEffect(() => {
+      if (pageType != type) {
+        setPageType(type);
+      }
+    }, []);
+
+    const pageTypeUpdated = type == pageType;
+
+    function renderCampaigns(data: any, api: any) {
+      if (responseMode == "HTML") {
+        // inject content campaigns as usual:
+        api.placements.injectCampaigns(data.recommendations);
+      } else {
+        // render recommendation component into placements:
+        const recommendations = data.campaigns.recommendations;
+        for (const key in recommendations) {
+          let recommendation = recommendations[key];
+          let placementSelector = "#" + key;
+          let placement: Function = () =>
+            document.querySelector(placementSelector);
+          if (!!placement()) {
+            if (!placementRefs.current[key])
+              placementRefs.current[key] = createRoot(placement());
+            const root = placementRefs.current[key];
+            root.render(
+              <RecommendationComponentWrapper
+                nostoRecommendation={recommendation}
+              ></RecommendationComponentWrapper>
+            );
+          }
+        }
+      }
+    }
+    return { renderCampaigns, pageTypeUpdated };
+  };
+
   useEffect(() => {
     if (!document.querySelectorAll("[nosto-client-script]").length) {
       const script = document.createElement("script");
@@ -58,8 +107,10 @@ const NostoProvider: React.FC<NostoProviderProps> = ({
         account,
         clientScriptLoaded,
         currentVariation,
-        renderFunction,
         responseMode,
+        recommendationComponent,
+        useRenderCampaigns,
+        pageType,
       }}
     >
       {children}

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

@@ -2,12 +2,19 @@ import React, { useEffect } from "react";
 import { useNostoContext } from "../Provider/context.client";
 
 const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
-  const { clientScriptLoaded, currentVariation, renderFunction, responseMode } =
-    useNostoContext();
+  const {
+    clientScriptLoaded,
+    currentVariation,
+    responseMode,
+    recommendationComponent,
+    useRenderCampaigns,
+  } = useNostoContext();
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("search");
 
   useEffect(() => {
     // @ts-ignore
-    if (clientScriptLoaded) {
+    if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api: any) => {
         api
           .defaultSession()
@@ -17,17 +24,17 @@ const NostoSearch: React.FC<{ query: string }> = ({ query }) => {
           .setPlacements(api.placements.getPlacements())
           .load()
           .then((data: object) => {
-            if (responseMode == "HTML") {
-              // @ts-ignore
-              api.placements.injectCampaigns(data.recommendations);
-            } else {
-              // @ts-ignore
-              renderFunction(data.campaigns);
-            }
+            renderCampaigns(data, api);
           });
       });
     }
-  }, [clientScriptLoaded, currentVariation, query, renderFunction]);
+  }, [
+    clientScriptLoaded,
+    currentVariation,
+    query,
+    recommendationComponent,
+    pageTypeUpdated,
+  ]);
 
   return (
     <>

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

@@ -13,7 +13,7 @@ interface NostoSessionProps {
 const NostoSession: React.FC<NostoSessionProps> = ({ cart, customer }) => {
   const { clientScriptLoaded } = useNostoContext();
   useDeepCompareEffect(() => {
-    const currentCart = cart ? snakeize(cart) : undefined;    
+    const currentCart = cart ? snakeize(cart) : undefined;
     const currentCustomer = customer ? snakeize(customer) : undefined;
 
     // @ts-ignore

package/src/index.client.ts

@@ -34,4 +34,3 @@ export {
 } from "./components/Provider/context.client";
 // noinspection JSUnusedGlobalSymbols
 export { default as NostoSession } from "./components/Session/index.client";
-//