---
title: useProduct
description: Provides access to the product value passed to <ProductProvider />.
api_version: 2026-04
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'
api_name: hydrogen-react
---

# use​Product

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

#### Props

**`PartialDeep< UseProductObjects, {recurseIntoArrays: true} > & UseProductFunctions`**

### UseProductFunctions

* **is​Option​In​Stock**

  **(name: string, value: string) => boolean**

  **required**

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

* **set​Selected​Option**

  **(name: string, value: string) => void**

  **required**

  A callback to set the selected option.

* **set​Selected​Options**

  **(options: SelectedOptions) => void**

  **required**

  A callback to set multiple selected options at once.

* **set​Selected​Selling​Plan**

  **( sellingPlan: PartialDeep\<SellingPlanType, {recurseIntoArrays: true}>, ) => void**

  **required**

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

* **set​Selected​Variant**

  **( variant: PartialDeep\<ProductVariantType, {recurseIntoArrays: true}> | null, ) => 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

* **selected​Options**

  **SelectedOptions**

  **required**

* **variants**

  **ProductVariant\[]**

  **required**

  An array of the variant `nodes` from the `VariantConnection`.

* **selected​Selling​Plan**

  **SellingPlan**

  The selected selling plan.

* **selected​Selling​Plan​Allocation**

  **SellingPlanAllocation**

  The selected selling plan allocation.

* **selected​Variant**

  **ProductVariantType | null**

  The selected variant.

* **selling​Plan​Groups**

  **(Omit\<SellingPlanGroup, "sellingPlans"> & { sellingPlans: SellingPlan\[]; })\[]**

  The selling plan groups.

* **selling​Plan​Groups​Connection**

  **SellingPlanGroupConnection**

  An auto-generated type for paginating through multiple SellingPlanGroups.

* **variants​Connection**

  **ProductVariantConnection**

  An auto-generated type for paginating through multiple ProductVariants.

### 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
  SellingPlan
  ```

* selectedSellingPlanAllocation

  The selected selling plan allocation.

  ```ts
  SellingPlanAllocation
  ```

* selectedVariant

  The selected variant.

  ```ts
  ProductVariantType | null
  ```

* sellingPlanGroups

  The selling plan groups.

  ```ts
  (Omit<SellingPlanGroup, "sellingPlans"> & { sellingPlans: SellingPlan[]; })[]
  ```

* sellingPlanGroupsConnection

  An auto-generated type for paginating through multiple SellingPlanGroups.

  ```ts
  SellingPlanGroupConnection
  ```

* variants

  An array of the variant \`nodes\` from the \`VariantConnection\`.

  ```ts
  ProductVariant[]
  ```

* variantsConnection

  An auto-generated type for paginating through multiple ProductVariants.

  ```ts
  ProductVariantConnection
  ```

### OptionWithValues

* name

  ```ts
  string
  ```

* values

  ```ts
  string[]
  ```

### SelectedOptions



### 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: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>,
    ) => void
  ```

* setSelectedVariant

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

  ```ts
  (
      variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null,
    ) => void
  ```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  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>;
        })}
        ;
      </>
    );
  }
  ```

  ##### 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 (
      <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>;
        })}
        ;
      </>
    );
  }
  ```

***

## Related

[ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2026-04/components/productprovider)

***