@nosto/nosto-react 0.1.9 → 0.1.11

package/README.md

@@ -1,17 +1,17 @@
-# React Nosto
+# Nosto React
 
-React Nosto is a React component library to make it even easier to implement Nosto.
+Nosto React is a React component library to make it even easier to implement Nosto.
 
-Nosto for React provides you everything to get started with personlisation on your React site. It's dead simple, and beginner friendly.
+The library provides you everything to get started with personalisation on your React site. It's dead simple, and beginner friendly.
 
 
 
-### Why
+### Why?
 
-You should be using React Nosto if you want to:
+You should be using Nosto React if you want to:
 
 - Design personalisation experiences with best practices
-- Customize your components at will
+- Customize your components at will and with ease
 - Follow React principles
 
 
@@ -19,12 +19,14 @@ You should be using React Nosto if you want to:
 ### Features
 
 - ✓ Lightweight. Almost zero bloat.
-- ✓ Full support for the Facebook Pixel and Google Analytics
+- ✓ Full support for the Facebook Pixel and Google Analytics.
 - ✓ Full support for leveraging overlays.
-- ✓ Full support for placements and dynamic placements.
 - ✓ Full support for the JS API.
-- ✘ No support for Nosto's Debug Toolbar.
-- ✘ No support for server-side rendering (SSR).
+- ✓ Full support for placements*.
+- ✓ Partial support for Nosto's Debug Toolbar. Supports most use-cases with page tagging and debug workflows. 
+- ✘ No support for client-side rendering (SSR) for recommendations and content, yet.
+
+_*Note: dynamic placements are not supported on Shopify Hydrogen due to the React framework explicitly restricting injecting DOM elements in this way. This can be disabled explicitly via configuration. Static placements continue to be supported fully. Please see `<NostoPlacement>` below for more details._ 
 
 ### Building
 
@@ -40,7 +42,7 @@ You should be using React Nosto if you want to:
 
 ##### NPM:
 
-    npm install --save @nosto/nosto-react
+    npm install @nosto/nosto-react
 
 
 
@@ -48,14 +50,14 @@ You should be using React Nosto if you want to:
 
 ##### The root widget
 
-There’s one very specific widget in React Nosto and it is the `NostoProvider` one.
+There’s one very specific widget in Nosto React and it is the `NostoProvider` one.
 
 This widget is what we call the Nosto root widget, which is responsible for adding the actual Nosto script and the JS API stub. This widget wraps all other React Nosto widgets. Here’s how:
 
-```tsx
+```jsx
 import { NostoProvider } from "@nosto/nosto-react";
 
-<NostoProvider account="yqegfddy">
+<NostoProvider account="your-nosto-account-id">
   <App />
 </NostoProvider>
 ```
@@ -66,22 +68,22 @@ import { NostoProvider } from "@nosto/nosto-react";
 
 ##### Understanding Placements
 
-React Nosto has a special component called `NostoPlacement`. The component is a simply a <u>hidden</u> DIV placeholder into which Nosto injects recommendations or personalises the content between the tags.
+Nosto React has a special component called `NostoPlacement`. The component is a simply a <u>hidden</u> `<div>` placeholder into which Nosto injects recommendations or personalises the content between the tags. 
 
 We recommend adding as many placements across your views as needed as these are hidden and only populated when a corresponding campaign (targeting that placement) is configured.
 
 
 
 ##### Managing the session
-
-React Nosto requires that you pass it the details of current cart contents and the details of the currently logged in customer (if any), on every route change.
+ 
+Nosto React requires that you pass it the details of current cart contents and the details of the currently logged-in customer, if any, on every route change. This makes it easier to add attribution. 
 
 The `NostoSession` component makes it very easy to keep the session up to date so long as the cart and the customer are provided.
 
 The `cart` prop requires a value that adheres to the type `Cart`, while the `customer` prop requires a value that adheres to the type `Customer`.
 
-```tsx
-import { Cart, Customer, Item, NostoSession } from "@nosto/nosto-react";
+```jsx
+import { NostoSession } from "@nosto/nosto-react";
 
 <>
 <Meta/>
@@ -98,9 +100,9 @@ import { Cart, Customer, Item, NostoSession } from "@nosto/nosto-react";
 
 
 
-#### Adding Personalisation
+### Adding Personalisation
 
-React Nosto ships with canned components for the different page types. Each component contains all lifecycle methods to dispatch the necessary events.
+Nosto React ships with canned components for the different page types. Each component contains all lifecycle methods to dispatch the necessary events.
 
 
 
@@ -110,7 +112,9 @@ The `NostoHome` component must be used to personalise the home page. The compone
 
 By default, your account, when created, has <u>four</u> front-page placements named `frontpage-nosto-1`, `frontpage-nosto-2`, `frontpage-nosto-3` and `frontpage-nosto-4`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
-```tsx
+The `<NostoHome \>` component needs to be added after the placements. Content and recommendations will be rendered through this component.
+
+```jsx
 import { NostoHome, NostoPlacement } from "@nosto/nosto-react";
 
 <div className="front-page">
@@ -133,7 +137,9 @@ The `NostoProduct` component must be used to personalise the product page. The c
 
 By default, your account, when created, has <u>three</u> product-page placements named `productpage-nosto-1`, `productpage-nosto-2` and `productpage-nosto-3`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
-```tsx
+The `<NostoProduct \>` component needs to be added after the placements. Content and recommendations will be rendered through this component. Pass in the product ID via the `product` prop to pass this information back to Nosto.
+
+```jsx
 import { NostoPlacement, NostoProduct } from "@nosto/nosto-react";
 
 <div className="product-page">
@@ -155,7 +161,7 @@ You can personalise your search pages by using the `NostoSearch` component. The
 
 By default, your account, when created, has <u>two</u> search-page placements named `searchpage-nosto-1` and `searchpage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
-```tsx
+```jsx
 import { NostoPlacement, NostoSearch } from "@nosto/nosto-react";
 
 <div className="search-page">
@@ -178,7 +184,7 @@ You can personalise your category and collection pages by using the `NostoCatego
 
 By default, your account, when created, has <u>two</u> category placements named `categorypage-nosto-1` and `categorypage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
-```tsx
+```jsx
 import { NostoCategory, NostoPlacement } from "@nosto/nosto-react";
 
 <div className="category-page">
@@ -201,15 +207,15 @@ You can personalise your cart and checkout pages by using the `NostoCheckout` co
 
 By default, your account, when created, has <u>two</u> cart-page placements named `categorypage-nosto-1` and `categorypage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
-```tsx
+```jsx
 import { NostoCheckout, NostoPlacement } from "@nosto/nosto-react";
 
-<div className="-page">
+<div className="checkout-page">
   ...
   ...
   ...
-  <NostoPlacement id="categorypage-nosto-1" />
-  <NostoPlacement id="categorypage-nosto-2" />
+  <NostoPlacement id="checkout-nosto-1" />
+  <NostoPlacement id="checkout-nosto-2" />
   <NostoCheckout />
 </div>
 ```
@@ -222,7 +228,7 @@ You can personalise your cart and checkout pages by using the `Nosto404` compone
 
 By default, your account, when created, has three 404-page placements named `notfound-nosto-1`, `notfound-nosto-2` and `notfound-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
-```tsx
+```jsx
 import { Nosto404, NostoPlacement } from "@nosto/nosto-react";
 
 <div className="notfound-page">
@@ -244,10 +250,10 @@ You can personalise your miscellaneous pages by using the `NostoOther` component
 
 By default, your account, when created, has two other-page placements named `other-nosto-1` and `other-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
-```tsx
+```jsx
 import { NostoOther, NostoPlacement } from "@nosto/nosto-react";
 
-<div className="notfound-page">
+<div className="other-page">
   ...
   ...
   ...
@@ -267,7 +273,7 @@ By default, your account, when created, has one other-page placement named `than
 
 The `order` prop requires a value that adheres to the type `Purchase`.
 
-```tsx
+```jsx
 import { Buyer, Item, NostoOrder, NostoPlacement, Purchase } from "@nosto/nosto-react";
 
 <div className="thankyou-page">
@@ -279,7 +285,6 @@ import { Buyer, Item, NostoOrder, NostoPlacement, Purchase } from "@nosto/nosto-
 </div>
 ```
 
-
 ### Feedback
 
 If you've found a feature missing or you would like to report an issue, simply [open up an issue](https://github.com/nosto/nosto-react/issues/new) and let us know. 

package/package.json

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