Choose a version:

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

ProductHookValue

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

UseProductObjects

options
An array of the product's options and values.
```
OptionWithValues[]
```
product
The raw product from the Storefront API
```
Product
```
selectedOptions
```
SelectedOptions
```
selectedSellingPlan
The selected selling plan.
```
SellingPlanType
```
selectedSellingPlanAllocation
The selected selling plan allocation.
```
SellingPlanAllocationType
```
selectedVariant
The selected variant.
```
ProductVariantType | null
```

sellingPlanGroups

The selling plan groups.

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

sellingPlanGroupsConnection
```
SellingPlanGroupConnection
```
variants
An array of the variant `nodes` from the `VariantConnection`.
```
ProductVariant[]
```
variantsConnection
```
ProductVariantConnection
```

{
  /** 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<SellingPlanGroupType, 'sellingPlans'> & {
    sellingPlans: SellingPlanType[];
  })[];
  sellingPlanGroupsConnection?: SellingPlanGroupConnection;
}

OptionWithValues

name
```
string
```
values
```
string[]
```

export interface OptionWithValues {
  name: SelectedOptionType['name'];
  values: SelectedOptionType['value'][];
}

SelectedOptions

{
  [key: string]: string;
}

UseProductFunctions

isOptionInStock
A callback that returns a boolean indicating if the option is in stock.
```
(name: string, value: string) => boolean
```
setSelectedOption
A callback to set the selected option.
```
(name: string, value: string) => void
```
setSelectedOptions
A callback to set multiple selected options at once.
```
(options: SelectedOptions) => void
```
setSelectedSellingPlan
A callback to set the selected selling plan to the one passed as an argument.
```
(sellingPlan: PartialObjectDeep<SellingPlan, { recurseIntoArrays: true; }>) => void
```
setSelectedVariant
A callback to set the selected variant to the variant passed as an argument.
```
(variant: PartialObjectDeep<ProductVariant, { recurseIntoArrays: true; }>) => void
```

{
  /** A callback to set the selected variant to the variant passed as an argument. */
  setSelectedVariant: (
    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | 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<SellingPlanType, {recurseIntoArrays: true}>,
  ) => void;
  /** A callback that returns a boolean indicating if the option is in stock. */
  isOptionInStock: (
    name: SelectedOptionType['name'],
    value: SelectedOptionType['value'],
  ) => boolean;
}

Was this section helpful?

Example code

import {ProductProvider, useProduct} from '@shopify/hydrogen-react';

export function Product({product}) {

return (

</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>;

})}

;

</>

);

}

examples

Example code

description

I am the default example

JavaScript

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

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