---
title: useProduct
description: >-
Provides access to the product value passed to ``. It also
includes properties for selecting product variants, options, and selling
plans.
api_version: 2025-07
api_name: hydrogen-react
source_url:
html: 'https://shopify.dev/docs/api/hydrogen-react/latest/hooks/useproduct'
md: 'https://shopify.dev/docs/api/hydrogen-react/latest/hooks/useproduct.md'
---
# use​Product
Provides access to the product value passed to ``. It also includes properties for selecting product variants, options, and selling plans.
## Props
`PartialDeep< UseProductObjects, {recurseIntoArrays: true} > & UseProductFunctions`
### UseProductFunctions
* isOptionInStock
(name: string, value: string) => boolean
required
A callback that returns a boolean indicating if the option is in stock.
* setSelectedOption
(name: string, value: string) => void
required
A callback to set the selected option.
* setSelectedOptions
(options: SelectedOptions) => void
required
A callback to set multiple selected options at once.
* setSelectedSellingPlan
(sellingPlan: PartialObjectDeep\) => void
required
A callback to set the selected selling plan to the one passed as an argument.
* setSelectedVariant
(variant: PartialObjectDeep\) => void
required
A callback to set the selected variant to the variant passed as an argument.
### UseProductObjects
* options
OptionWithValues\[]
required
An array of the product's options and values.
* product
Product
required
The raw product from the Storefront API
* selectedOptions
SelectedOptions
required
* variants
ProductVariant\[]
required
An array of the variant `nodes` from the `VariantConnection`.
* selectedSellingPlan
SellingPlanType
The selected selling plan.
* selectedSellingPlanAllocation
SellingPlanAllocationType
The selected selling plan allocation.
* selectedVariant
ProductVariantType | null
The selected variant.
* sellingPlanGroups
(Omit\ & { sellingPlans: SellingPlan\[]; })\[]
The selling plan groups.
* sellingPlanGroupsConnection
SellingPlanGroupConnection
* variantsConnection
ProductVariantConnection
### UseProductObjects
* options
An array of the product's options and values.
```ts
OptionWithValues[]
```
* product
The raw product from the Storefront API
```ts
Product
```
* selectedOptions
```ts
SelectedOptions
```
* selectedSellingPlan
The selected selling plan.
```ts
SellingPlanType
```
* selectedSellingPlanAllocation
The selected selling plan allocation.
```ts
SellingPlanAllocationType
```
* selectedVariant
The selected variant.
```ts
ProductVariantType | null
```
* sellingPlanGroups
The selling plan groups.
```ts
(Omit & { sellingPlans: SellingPlan[]; })[]
```
* sellingPlanGroupsConnection
```ts
SellingPlanGroupConnection
```
* variants
An array of the variant \`nodes\` from the \`VariantConnection\`.
```ts
ProductVariant[]
```
* variantsConnection
```ts
ProductVariantConnection
```
```ts
{
/** The raw product from the Storefront API */
product: Product;
/** An array of the variant `nodes` from the `VariantConnection`. */
variants: ProductVariantType[];
variantsConnection?: ProductVariantConnection;
/** An array of the product's options and values. */
options: OptionWithValues[];
/** The selected variant. */
selectedVariant?: ProductVariantType | null;
selectedOptions: SelectedOptions;
/** The selected selling plan. */
selectedSellingPlan?: SellingPlanType;
/** The selected selling plan allocation. */
selectedSellingPlanAllocation?: SellingPlanAllocationType;
/** The selling plan groups. */
sellingPlanGroups?: (Omit & {
sellingPlans: SellingPlanType[];
})[];
sellingPlanGroupsConnection?: SellingPlanGroupConnection;
}
```
### OptionWithValues
* name
```ts
string
```
* values
```ts
string[]
```
```ts
export interface OptionWithValues {
name: SelectedOptionType['name'];
values: SelectedOptionType['value'][];
}
```
### SelectedOptions
```ts
{
[key: string]: string;
}
```
### UseProductFunctions
* isOptionInStock
A callback that returns a boolean indicating if the option is in stock.
```ts
(name: string, value: string) => boolean
```
* setSelectedOption
A callback to set the selected option.
```ts
(name: string, value: string) => void
```
* setSelectedOptions
A callback to set multiple selected options at once.
```ts
(options: SelectedOptions) => void
```
* setSelectedSellingPlan
A callback to set the selected selling plan to the one passed as an argument.
```ts
(sellingPlan: PartialObjectDeep) => void
```
* setSelectedVariant
A callback to set the selected variant to the variant passed as an argument.
```ts
(variant: PartialObjectDeep) => void
```
```ts
{
/** A callback to set the selected variant to the variant passed as an argument. */
setSelectedVariant: (
variant: PartialDeep | null,
) => void;
/** A callback to set the selected option. */
setSelectedOption: (
name: SelectedOptionType['name'],
value: SelectedOptionType['value'],
) => void;
/** A callback to set multiple selected options at once. */
setSelectedOptions: (options: SelectedOptions) => void;
/** A callback to set the selected selling plan to the one passed as an argument. */
setSelectedSellingPlan: (
sellingPlan: PartialDeep,
) => void;
/** A callback that returns a boolean indicating if the option is in stock. */
isOptionInStock: (
name: SelectedOptionType['name'],
value: SelectedOptionType['value'],
) => boolean;
}
```
Examples
### Examples
* #### Example code
##### Description
I am the default example
##### JavaScript
```jsx
import {ProductProvider, useProduct} from '@shopify/hydrogen-react';
export function Product({product}) {
return (
);
}
function UsingProduct() {
const {product, variants, setSelectedVariant} = useProduct();
return (
<>
{product?.title}
{variants?.map((variant) => {
;
})}
;
);
}
```
##### TypeScript
```tsx
import {ProductProvider, useProduct} from '@shopify/hydrogen-react';
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
export function Product({product}: {product: Product}) {
return (
);
}
function UsingProduct() {
const {product, variants, setSelectedVariant} = useProduct();
return (
<>