---
title: ProductProvider
description: /> is a context provider that enables use of the useProduct() hook.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/productprovider
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/productprovider.md
api_name: hydrogen-react
---

# Product​Provider

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

#### Props

* **children**

  **React.ReactNode**

  **required**

  A `ReactNode` element.

* **data**

  **PartialDeep\<Product, {recurseIntoArrays: true}>**

  **required**

  A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product).

* **initial​Variant​Id**

  **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.

### InitialVariantId

```ts
ProductVariantType['id'] | null
```

Examples

### Examples

* #### ProductProvider example

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

[useProduct](https://shopify.dev/docs/api/hydrogen-react/2026-04/hooks/useproduct)

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

***