ProductProvider Component

Product Provider

The Product Provider component enables the management of selected options and variants for a product. It provides a context provider along with hooks to manage product-related state within a React application.

Usage

The ProductProvider component is a context provider that manages selected options and variants for a product.

import React from "react";
import { ProductProvider } from "@airsoko/react";
import { Product } from "@airsoko/react";
 
const MyComponent = ({ productData }: { productData: Product }) => {
  return (
    <ProductProvider data={productData}>{/* Your components that use product context */}</ProductProvider>
  );
};

Props

Name	Type	Description
`data`	`PartialDeep<Product, { recurseIntoArrays: true }>`	A Storefront API Product object.
`children`	`React.ReactNode`	The child elements that will have access to the product context.
`initialVariantId`	`InitialVariantId`	The initially selected variant. If provided, it's used even if it's out of stock. If `null`, no variant is used. If not provided, the first available/in-stock variant is used.

Functions

Available functions under ProductProvider context

useProduct Hook

The useProduct hook allows components to access the product context and its associated functions.

import React from "react";
import { useProduct } from "@airsoko/react";
 
const MyComponent = () => {
  const { selectedVariant, setSelectedOption } = useProduct();
 
  // Access and update product state
};

Components and Hooks

Components

ProductProvider: Context provider for managing product-related state.

Hooks useProduct: Hook for accessing the product context and its associated functions.

Notes

Ensure that the ProductProvider component wraps the components that require access to product-related state.
Use the useProduct hook within components to access and manage product-related state.

CheckoutProvider WishlistProvider