Skip to main content

useProduct
hook

Provides access to the product value passed to <ProductProvider />. It also includes properties for selecting product variants, options, and selling plans.

Anchor to propsProps

PartialDeep< UseProductObjects, {recurseIntoArrays: true} > & UseProductFunctions
Anchor to UseProductFunctions

UseProductFunctions

Anchor to isOptionInStock
isOptionInStock
(name: string, value: string) => boolean
required

A callback that returns a boolean indicating if the option is in stock.

Anchor to setSelectedOption
setSelectedOption
(name: string, value: string) => void
required

A callback to set the selected option.

Anchor to setSelectedOptions
setSelectedOptions
(options: ) => void
required

A callback to set multiple selected options at once.

Anchor to setSelectedSellingPlan
setSelectedSellingPlan
(sellingPlan: PartialObjectDeep<SellingPlan, { recurseIntoArrays: true; }>) => void
required

A callback to set the selected selling plan to the one passed as an argument.

Anchor to setSelectedVariant
setSelectedVariant
(variant: PartialObjectDeep<ProductVariant, { recurseIntoArrays: true; }>) => void
required

A callback to set the selected variant to the variant passed as an argument.

Anchor to UseProductObjects

UseProductObjects

Anchor to options
options
[]
required

An array of the product's options and values.

Anchor to product
product
Product
required

The raw product from the Storefront API

Anchor to selectedOptions
selectedOptions
required
Anchor to variants
variants
ProductVariant[]
required

An array of the variant nodes from the VariantConnection.

Anchor to selectedSellingPlan
selectedSellingPlan
SellingPlanType

The selected selling plan.

Anchor to selectedSellingPlanAllocation
selectedSellingPlanAllocation
SellingPlanAllocationType

The selected selling plan allocation.

Anchor to selectedVariant
selectedVariant
ProductVariantType | null

The selected variant.

Anchor to sellingPlanGroups
sellingPlanGroups
(Omit<SellingPlanGroup, "sellingPlans"> & { sellingPlans: SellingPlan[]; })[]

The selling plan groups.

Anchor to sellingPlanGroupsConnection
sellingPlanGroupsConnection
SellingPlanGroupConnection
Anchor to variantsConnection
variantsConnection
ProductVariantConnection
Was this section helpful?

Example code

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

ProductProvider