Skip to main content

ProductProvider
component

<ProductProvider /> is a context provider that enables use of the useProduct() hook. It helps manage selected options and variants for a product.

Anchor to propsProps

Anchor to data
data
PartialDeep<Product, {recurseIntoArrays: true}>
required

A Storefront API Product object.

Anchor to children
children
React.ReactNode
required

A ReactNode element.

Anchor to initialVariantId
initialVariantId

The initially selected variant. The following logic applies to initialVariantId: 1. If initialVariantId is provided, then it's used even if it's out of stock. 2. If initialVariantId is provided but is null, then no variant is used. 3. If nothing is passed to initialVariantId then the first available / in-stock variant is used. 4. If nothing is passed to initialVariantId and no variants are in stock, then the first variant is used.

Was this section helpful?

ProductProvider example

import {ProductProvider, useProduct} from '@shopify/hydrogen-react';

export function Product({product}) {
return (
<ProductProvider data={product} initialVariantId="some-id">
<UsingProduct />
</ProductProvider>
);
}

function UsingProduct() {
const {product, variants, setSelectedVariant} = useProduct();
return (
<>
<h1>{product?.title}</h1>
{variants?.map((variant) => {
<button onClick={() => setSelectedVariant(variant)} key={variant?.id}>
{variant?.title}
</button>;
})}
;
</>
);
}

Anchor to relatedRelated

useProduct
ProductPrice