---
title: ProductProvider
description: >-
  `<ProductProvider />` is a context provider that enables use of the
  `useProduct()` hook. It helps manage selected options and variants for a
  product.
api_version: 2025-07
api_name: hydrogen-react
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
---

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

* initialVariantId

  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/api/hydrogen-react/hooks/useproduct)

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