Product
component
is a context provider that enables use of the hook. It helps manage selected options and variants for a product.
Anchor to propsProps
Anchor to children
children
React.ReactNode
required
A element.
Anchor to data
data
PartialDeep<Product, {recurseIntoArrays: true}>
required
A Storefront API Product object.
Anchor to initialVariantId
initialVariantId
The initially selected variant. The following logic applies to : 1. If is provided, then it's used even if it's out of stock. 2. If is provided but is null, then no variant is used. 3. If nothing is passed to then the first available / in-stock variant is used. 4. If nothing is passed to 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>;
})}
;
</>
);
}
