@nosto/nosto-react 2.0.0 → 2.2.0

package/README.md

@@ -264,6 +264,19 @@ import {
 </div>;
 ```
 
+### Hook alternatives
+
+For all the page type specific components hooks are also provided with the same props
+
+- useNosto404
+- useNostoOther
+- useNostoCheckout
+- useNostoProduct
+- useNostoCategory
+- useNostoSearch
+- useNostOrder
+- useNostoHome
+
 ### Detailed technical documentation
 Find our latest technical specs and documentation hosted [here](https://nosto.github.io/nosto-react).
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Context } from 'react';
-import { default as default_2 } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
 
 declare type AnyFunction = (...args: unknown[]) => unknown;
 
@@ -12,6 +12,8 @@ export declare interface Cart {
     items: CartItem[];
 }
 
+declare type Cart_2 = Cart | ToCamelCase<Cart>;
+
 /**
  * @group Types
  */
@@ -52,6 +54,8 @@ export declare interface Customer {
     type?: string;
 }
 
+declare type Customer_2 = Customer | ToCamelCase<Customer>;
+
 /**
  * You can personalise your cart and checkout pages by using the `Nosto404` component.
  * The component does not require any props.
@@ -72,9 +76,14 @@ export declare interface Customer {
  *
  * @group Components
  */
-export declare function Nosto404(props: {
+export declare function Nosto404(props: Nosto404Props): null;
+
+/**
+ * @group Components
+ */
+export declare type Nosto404Props = {
     placements?: string[];
-}): null;
+};
 
 /**
  * You can personalise your category and collection pages by using the NostoCategory component.
@@ -98,10 +107,15 @@ export declare function Nosto404(props: {
  *
  * @group Components
  */
-export declare function NostoCategory(props: {
+export declare function NostoCategory(props: NostoCategoryProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoCategoryProps = {
     category: string;
     placements?: string[];
-}): null;
+};
 
 /**
  * You can personalise your cart and checkout pages by using the NostoCheckout component.
@@ -122,9 +136,14 @@ export declare function NostoCategory(props: {
  *
  * @group Components
  */
-export declare function NostoCheckout(props: {
+export declare function NostoCheckout(props: NostoCheckoutProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoCheckoutProps = {
     placements?: string[];
-}): null;
+};
 
 /**
  * @group Essential Functions
@@ -166,9 +185,14 @@ export declare interface NostoContextType {
  *
  * @group Components
  */
-export declare function NostoHome(props: {
+export declare function NostoHome(props: NostoHomeProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoHomeProps = {
     placements?: string[];
-}): null;
+};
 
 /**
  * You can personalise your order-confirmation/thank-you page by using the `NostoOrder` component.
@@ -189,10 +213,15 @@ export declare function NostoHome(props: {
  *
  * @group Components
  */
-export declare function NostoOrder(props: {
+export declare function NostoOrder(props: NostoOrderProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoOrderProps = {
     order: Order;
     placements?: string[];
-}): null;
+};
 
 /**
  * You can personalise your miscellaneous pages by using the NostoOther component.
@@ -213,9 +242,14 @@ export declare function NostoOrder(props: {
  *
  * @group Components
  */
-export declare function NostoOther(props: {
+export declare function NostoOther(props: NostoOtherProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoOtherProps = {
     placements?: string[];
-}): null;
+};
 
 /**
  * Nosto React has a special component called NostoPlacement.
@@ -230,10 +264,15 @@ export declare function NostoOther(props: {
  *
  * @group Components
  */
-export declare function NostoPlacement(props: {
+export declare function NostoPlacement({ id, pageType }: NostoPlacementProps): JSX_2.Element;
+
+/**
+ * @group Components
+ */
+export declare type NostoPlacementProps = {
     id: string;
     pageType?: string;
-}): JSX_2.Element;
+};
 
 /**
  * The NostoProduct component must be used to personalise the product page.
@@ -259,11 +298,16 @@ export declare function NostoPlacement(props: {
  *
  * @group Components
  */
-export declare function NostoProduct(props: {
+export declare function NostoProduct(props: NostoProductProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoProductProps = {
     product: string;
     tagging?: Product;
     placements?: string[];
-}): null;
+};
 
 /**
  * This widget is what we call the Nosto root widget, which is responsible for adding the actual Nosto script and the JS API stub.
@@ -291,7 +335,7 @@ export declare function NostoProvider(props: NostoProviderProps): JSX_2.Element;
 /**
  * @group Components
  */
-declare interface NostoProviderProps {
+export declare interface NostoProviderProps {
     /**
      * Indicates merchant id
      */
@@ -307,7 +351,7 @@ declare interface NostoProviderProps {
     /**
      * children
      */
-    children: default_2.ReactElement | default_2.ReactElement[];
+    children: ReactElement | ReactElement[];
     /**
      * Indicates if merchant uses multiple currencies
      */
@@ -323,6 +367,14 @@ declare interface NostoProviderProps {
         language?: string;
         marketId?: string | number;
     };
+    /**
+     * Load nosto script (should be false if loading the script outside of nosto-react)
+     */
+    loadScript?: boolean;
+    /**
+     * Custom script loader
+     */
+    scriptLoader?: (scriptSrc: string, options?: ScriptLoadOptions) => Promise<void>;
 }
 
 /**
@@ -348,10 +400,15 @@ declare interface NostoProviderProps {
  *
  * @group Components
  */
-export declare function NostoSearch(props: {
+export declare function NostoSearch(props: NostoSearchProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoSearchProps = {
     query: string;
     placements?: string[];
-}): null;
+};
 
 /**
  * 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.
@@ -361,12 +418,17 @@ export declare function NostoSearch(props: {
  *
  * 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`.
  *
- * @group Essential Functions
+ * @group Components
  */
-export declare function NostoSession(props?: {
-    cart?: Cart;
-    customer?: Customer;
-}): JSX_2.Element;
+export declare function NostoSession(props?: NostoSessionProps): null;
+
+/**
+ * @group Components
+ */
+export declare type NostoSessionProps = {
+    cart?: Cart_2;
+    customer?: Customer_2;
+};
 
 declare interface NostoSku extends Sku {
     inventory_level?: number;
@@ -481,7 +543,7 @@ export declare interface Recommendation {
     params: unknown;
 }
 
-declare type RecommendationComponent = React.ReactElement<{
+declare type RecommendationComponent = ReactElement<{
     nostoRecommendation: Recommendation;
 }>;
 
@@ -490,6 +552,20 @@ declare type RecommendationComponent = React.ReactElement<{
  */
 declare type RenderMode = "HTML" | "SIMPLE" | "JSON_170x170" | "JSON_100_X_100" | "JSON_90x70" | "JSON_50x50" | "JSON_30x30" | "JSON_100x140" | "JSON_200x200" | "JSON_400x400" | "JSON_750x750" | "JSON_10_MAX_SQUARE" | "JSON_200x200_SQUARE" | "JSON_400x400_SQUARE" | "JSON_750x750_SQUARE" | "JSON_ORIGINAL" | "VERSION_SOURCE";
 
+/**
+ * @group Types
+ */
+export declare type ScriptLoadOptions = {
+    /**
+     * Indicates the position of the script, default is "body"
+     */
+    position?: "head" | "body";
+    /**
+     * Indicates the attributes of the script element
+     */
+    attributes?: Record<string, string>;
+};
+
 declare interface Sku {
     availability: string;
     custom_fields: {
@@ -504,6 +580,33 @@ declare interface Sku {
     url?: string;
 }
 
+declare type SnakeToCamelCase<S extends string> = S extends `${infer T}_${infer U}` ? `${T}${Capitalize<SnakeToCamelCase<U>>}` : S;
+
+declare type ToCamelCase<T> = T extends (infer U)[] ? ToCamelCase<U>[] : T extends Date ? T : T extends object ? {
+    [K in keyof T as SnakeToCamelCase<K & string>]: ToCamelCase<T[K]>;
+} : T;
+
+/**
+ * You can personalise your cart and checkout pages by using the `useNosto404` hook.
+ *
+ * @group Hooks
+ */
+export declare function useNosto404(props?: Nosto404Props): void;
+
+/**
+ * You can personalise your category and collection pages by using the useNostoCategory hook.
+ *
+ * @group Hooks
+ */
+export declare function useNostoCategory({ category, placements }: NostoCategoryProps): void;
+
+/**
+ * You can personalise your cart and checkout pages by using the useNostoCheckout hook.
+ *
+ * @group Hooks
+ */
+export declare function useNostoCheckout(props?: NostoCheckoutProps): void;
+
 /**
  * A hook that allows you to access the NostoContext and retrieve Nosto-related data from it in React components.
  *
@@ -511,6 +614,48 @@ declare interface Sku {
  */
 export declare function useNostoContext(): NostoContextType;
 
+/**
+ * You can personalise your home page by using the useNostoHome hook.
+ *
+ * @group Hooks
+ */
+export declare function useNostoHome(props?: NostoHomeProps): void;
+
+/**
+ * You can personalise your order-confirmation/thank-you page by using the `useNostoOrder` hook.
+ *
+ * @group Hooks
+ */
+export declare function useNostoOrder({ order, placements }: NostoOrderProps): void;
+
+/**
+ * You can personalise your miscellaneous pages by using the useNostoOther hook.
+ *
+ * @group Hooks
+ */
+export declare function useNostoOther(props?: NostoOtherProps): void;
+
+/**
+ * You can personalise your product pages by using the useNostoProduct hook.
+ *
+ * @group Hooks
+ */
+export declare function useNostoProduct({ product, tagging, placements }: NostoProductProps): void;
+
+/**
+ * You can personalise your search pages by using the useNostoSearch hook.
+ *
+ * @group Hooks
+ */
+export declare function useNostoSearch({ query, placements }: NostoSearchProps): void;
+
+/**
+ * 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.
+ *
+ * @group Hooks
+ */
+export declare function useNostoSession({ cart, customer }?: NostoSessionProps): void;
+
 export { }
 
 declare global {