@nosto/nosto-react 2.1.0 → 2.2.1

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,7 @@
 import { Context } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 
 declare type AnyFunction = (...args: unknown[]) => unknown;
 
@@ -12,6 +13,8 @@ export declare interface Cart {
     items: CartItem[];
 }
 
+declare type Cart_2 = Cart | ToCamelCase<Cart>;
+
 /**
  * @group Types
  */
@@ -52,6 +55,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 +77,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 +108,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 +137,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 +186,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 +214,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 +243,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 +265,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 +299,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.
@@ -307,7 +352,7 @@ export declare interface NostoProviderProps {
     /**
      * children
      */
-    children: ReactElement | ReactElement[];
+    children: ReactNode | ReactNode[];
     /**
      * Indicates if merchant uses multiple currencies
      */
@@ -356,10 +401,15 @@ export 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.
@@ -369,12 +419,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?: NostoSessionProps): null;
+
+/**
+ * @group Components
  */
-export declare function NostoSession(props?: {
-    cart?: Cart;
-    customer?: Customer;
-}): JSX_2.Element;
+export declare type NostoSessionProps = {
+    cart?: Cart_2;
+    customer?: Customer_2;
+};
 
 declare interface NostoSku extends Sku {
     inventory_level?: number;
@@ -526,6 +581,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.
  *
@@ -533,6 +615,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 {