# Hydrogen React

Hydrogen React is a performant, framework-agnostic library of React components, reusable functions, and utilities for interacting with Shopify’s [Storefront API](https://shopify.dev/docs/api/storefront). It’s bundled with [Hydrogen](https://shopify.dev/docs/api/hydrogen), but can be used by any React-based web app.

## Setup


1. Install Hydrogen React in your project with your preferred package manager.
1. Import components, hooks, or utilities that you want to use in your app. For more detailed instructions, see the Getting Started guide.
      
```
npm i --save @shopify/hydrogen-react

```

```
yarn add @shopify/hydrogen-react

```

- [Tutorial](https://shopify.dev/docs/custom-storefronts/hydrogen-react): Getting Started with Hydrogen React

## Authentication

To use Hydrogen React, you need to authenticate with and make requests to the [Storefront API](https://shopify.dev/docs/api/storefront). Hydrogen React includes an [API client](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/createstorefrontclient) to securely handle API queries and mutations.

You can create and manage Storefront API access tokens by installing the [Headless sales channel](https://apps.shopify.com/headless) on your store.

Apps have access to [two kinds of tokens](https://shopify.dev/docs/api/usage/authentication#access-tokens-for-the-storefront-api): a public API token, which can be used in client-side code, and a private API token, which should only be used in server-side contexts and never exposed publicly.
```javascript
import {createStorefrontClient} from '@shopify/hydrogen-react';

export const client = createStorefrontClient({
  // load environment variables according to your framework and runtime
  storeDomain: process.env.PUBLIC_STORE_DOMAIN,
  publicStorefrontToken: process.env.PUBLIC_STOREFRONT_API_TOKEN,
});

```

```
# Replace with your own store domain and Storefront API token

PUBLIC_STOREFRONT_API_TOKEN="public_token"
PRIVATE_STOREFRONT_API_TOKEN="private_token"
PUBLIC_STORE_DOMAIN="store_id.myshopify.com"

```

```javascript
import {client} from './client.js';

export async function getServerSideProps() {
  const response = await fetch(client.getStorefrontApiUrl(), {
    body: JSON.stringify({
      query: GRAPHQL_QUERY,
    }),
    // Generate the headers using the private token.
    headers: client.getPrivateTokenHeaders(),
    method: 'POST',
  });

  if (!response.ok) {
    throw new Error(response.statusText);
  }

  const json = await response.json();

  return {props: json};
}

const GRAPHQL_QUERY = `
  query {
    shop {
      name
    }
  }
`;

```

- [Install](https://apps.shopify.com/headless): Headless sales channel

## Versioning

Hydrogen React is tied to specific versions of the [Storefront API](https://shopify.dev/docs/api/storefront), which is versioned quarterly. For example, if you're using Storefront API version `2023-10`, then Hydrogen versions `2023.10.x` are fully compatible.

> Caution:
>If a Storefront API version includes breaking changes, then the corresponding Hydrogen React version will include the same breaking changes.
- [Learn more](https://shopify.dev/docs/api/usage/versioning): Shopify API versioning
- [Learn more](https://shopify.dev/changelog): Developer changelog

## Components

Components include all the business logic and data parsing required to produce predictable markup for objects available through the Storefront API. Components provide defaults but can be customized. Hydrogen React components include no visual styles, other than the ones provided natively by browsers.
```javascript
import {ShopPayButton} from '@shopify/hydrogen-react';

export function MyProduct({variantId}) {
  return <ShopPayButton variantIds={[variantId]} />;
}

```


## Hooks

Hooks are functions that provide reusable business and/or state logic. They give you additional flexibility to control the behavior and display of Hydrogen React components.
```javascript
import {useMoney} from '@shopify/hydrogen-react';

export function MyComponent({variant}) {
  const {currencyCode, currencySymbol, amount} = useMoney(variant.pricev2);

  return (
    <div>
      <strong>{currencyCode}</strong>
      <span>{currencySymbol}</span>
      <span>{amount}</span>
    </div>
  );
}

```


## Utilities

Utilities are reusable functions for common manipulations performed on data returned from the Storefront API.
```javascript
import {flattenConnection, MediaFile} from '@shopify/hydrogen-react';

export function Product({product}) {
  const media = flattenConnection(product.media);
  return (
    <>
      {media.map((mediaFile) => {
        return <MediaFile data={mediaFile} key={mediaFile.id} />;
      })}
    </>
  );
}

```


## How Hydrogen React works with Hydrogen

Hydrogen React is bundled as part of Hydrogen, Shopify’s opinionated headless commerce stack built on [Remix](https://remix.run). Hydrogen React is also published separately as a standalone package so that it can be used by other React-based frameworks.

Hydrogen adds features like standard routes, caching strategies, redirects, and SEO. When using Hydrogen, you can also install the Hydrogen sales channel, which includes built-in support for Oxygen, Shopify’s global edge hosting platform. Consider which approach works best for your use case and existing technology stack.
- [Learn more](https://shopify.dev/docs/custom-storefronts/hydrogen): Hydrogen
- [Install](https://apps.shopify.com/hydrogen): Hydrogen sales channel

## References

- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLinePrice](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/cartlineprice.txt): `@deprecated` Use `Money` instead.  To migrate, use the `priceType` prop that matches the corresponding property on the `CartLine` object:  - `regular`: `cartLine.cost.totalAmount`  - `compareAt`: `cartLine.cost.compareAtAmountPerQuantity`  For example  Before:  `<CartLinePrice data={cartLine} priceType="regular" />`  After:  `<Money data={cartLine.cost.totalAmount} />`  The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  An image's width and height are determined using the following priority list: 1. The width and height values for the `loaderOptions` prop 2. The width and height values for bare props 3. The width and height values for the `data` prop  If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio, provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing value will remain as `null`
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2023-01/components/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/storefront-api-types.txt): If you are using TypeScript, Hydrogen React ships with pre-generated TypeScript types that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2023-01/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2023-01/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2023-01/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2023-01/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2023-01/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2023-01/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-01/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automativally (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2023-04/components/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2023-04/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2023-04/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2023-04/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2023-04/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2023-04/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2023-04/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-04/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2023-07/components/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [useLoadScript](https://shopify.dev/docs/api/hydrogen-react/2023-07/hooks/useloadscript.txt): The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2023-07/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2023-07/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2023-07/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2023-07/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2023-07/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2023-07/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-07/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2023-10/components/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [useLoadScript](https://shopify.dev/docs/api/hydrogen-react/2023-10/hooks/useloadscript.txt): The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2023-10/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2023-10/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2023-10/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2023-10/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2023-10/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2023-10/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2023-10/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2024-01/components/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [useLoadScript](https://shopify.dev/docs/api/hydrogen-react/2024-01/hooks/useloadscript.txt): The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2024-01/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2024-01/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2024-01/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2024-01/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2024-01/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2024-01/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-01/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/cart/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/cart/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/cart/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/cart/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/cart/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/cart/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/cart/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/media/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/media/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/media/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/media/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [RichText](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/richtext.txt): The `RichText` component renders a metafield of type `rich_text_field`. By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the `components` prop.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2024-04/components/media/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [useLoadScript](https://shopify.dev/docs/api/hydrogen-react/2024-04/hooks/useloadscript.txt): The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2024-04/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2024-04/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2024-04/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2024-04/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2024-04/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2024-04/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-04/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/cart/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/cart/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/cart/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/cart/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/cart/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/cart/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/cart/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/media/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/media/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/media/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/media/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [RichText](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/richtext.txt): The `RichText` component renders a metafield of type `rich_text_field`. By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the `components` prop.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2024-07/components/media/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [useLoadScript](https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/useloadscript.txt): The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2024-07/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/cart/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/cart/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/cart/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/cart/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/cart/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/cart/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/cart/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/media/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/media/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/media/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/media/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [RichText](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/richtext.txt): The `RichText` component renders a metafield of type `rich_text_field`. By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the `components` prop.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2024-10/components/media/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [getProductOptions](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/getproductoptions.txt): Returns a product options array with its relevant information about the variant. This function supports combined listing products and products with 2000 variants limit.
- [getAdjacentAndFirstAvailableVariants](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/getadjacentandfirstavailablevariants.txt): Finds all the variants provided by `adjacentVariants`, `options.optionValues.firstAvailableVariant`, and `selectedOrFirstAvailableVariant` and return them in a single array. This function will remove any duplicated variants found.
- [mapSelectedProductOptionToObject](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/mapselectedproductoptiontoobject.txt): Converts the product selected option into an `Object<key, value>` format for building URL query params
- [useLoadScript](https://shopify.dev/docs/api/hydrogen-react/2024-10/hooks/useloadscript.txt): The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
- [decodeEncodedVariant](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/decodeencodedvariant.txt): Decodes an encoded option value string into an array of option value combinations.
- [isOptionValueCombinationInEncodedVariant](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/isoptionvaluecombinationinencodedvariant.txt): Determines whether an option value combination is present in an encoded option value string.  `targetOptionValueCombination` - Indices of option values to look up in the encoded option value string. A partial set of indices may be passed to determine whether a node or any children is present. For example, if a product has 3 options, passing `[0]` will return true if any option value combination for the first option's option value is present in the encoded string.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2024-10/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2024-10/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2024-10/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2024-10/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useSelectedOptionInUrlParam](https://shopify.dev/docs/api/hydrogen-react/2024-10/utilities/useselectedoptioninurlparam.txt): Sets the url params to the selected option.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2024-10/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2024-10/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.
- [AddToCartButton](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/cart/addtocartbutton.txt): The `AddToCartButton` component renders a button that adds an item to the cart when pressed.  It must be a descendent of the `CartProvider` component.
- [BuyNowButton](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/buynowbutton.txt): The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.  Must be a child of a `CartProvider` component.
- [CartCheckoutButton](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/cart/cartcheckoutbutton.txt): The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.  Must be a descendent of a `CartProvider` component.
- [CartCost](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/cart/cartcost.txt): The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.  If no `amountType` prop is specified, then it defaults to `totalAmount`.  Depends on `useCart()` and must be a child of `<CartProvider/>`
- [CartLineProvider](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/cart/cartlineprovider.txt): The `CartLineProvider` component creates a context for using a cart line.
- [CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/cart/cartlinequantity.txt): The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartLineQuantityAdjustButton](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/cart/cartlinequantityadjustbutton.txt): The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.  It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
- [CartProvider](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/cart/cartprovider.txt): The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.  There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.  The `CartProvider` component must be a descendant of the `ShopifyProvider` component .
- [ExternalVideo](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/media/externalvideo.txt): The `ExternalVideo` component renders an embedded video for the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- [Image](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/media/image.txt): The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
- [MediaFile](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/media/mediafile.txt): The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
- [ModelViewer](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/media/modelviewer.txt): The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d). The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type='module'>` tag when the `<ModelViewer />` component is rendered. ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
- [Money](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/money.txt): The `Money` component renders a string of the Storefront API's[MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [ProductPrice](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/productprice.txt): The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
- [ProductProvider](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/productprovider.txt): `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook. It helps manage selected options and variants for a product.
- [RichText](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/richtext.txt): The `RichText` component renders a metafield of type `rich_text_field`. By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the `components` prop.
- [ShopPayButton](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/shoppaybutton.txt): The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout. It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
- [ShopifyProvider](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/shopifyprovider.txt): The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.
- [Video](https://shopify.dev/docs/api/hydrogen-react/2025-01/components/media/video.txt): The `Video` component renders a video for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video). The component outputs a `video` element. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- [sendShopifyAnalytics](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/sendshopifyanalytics.txt): Sends analytics to Shopify.
- [storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/storefrontapicustomscalars.txt): Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.
- [flattenConnection](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/flattenconnection.txt): The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes. The utility works with either `nodes` or `edges.node`.  If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.
- [getClientBrowserParameters](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/getclientbrowserparameters.txt): Gathers client browser values commonly used for analytics
- [getShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/getshopifycookies.txt): Parses cookie string and returns Shopify cookies.
- [getProductOptions](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/getproductoptions.txt): Returns a product options array with its relevant information about the variant. This function supports combined listing products and products with 2000 variants limit.
- [getAdjacentAndFirstAvailableVariants](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/getadjacentandfirstavailablevariants.txt): Finds all the variants provided by `adjacentVariants`, `options.optionValues.firstAvailableVariant`, and `selectedOrFirstAvailableVariant` and return them in a single array. This function will remove any duplicated variants found.
- [mapSelectedProductOptionToObject](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/mapselectedproductoptiontoobject.txt): Converts the product selected option into an `Object<key, value>` format for building URL query params
- [useLoadScript](https://shopify.dev/docs/api/hydrogen-react/2025-01/hooks/useloadscript.txt): The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
- [decodeEncodedVariant](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/decodeencodedvariant.txt): Decodes an encoded option value string into an array of option value combinations.
- [isOptionValueCombinationInEncodedVariant](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/isoptionvaluecombinationinencodedvariant.txt): Determines whether an option value combination is present in an encoded option value string.  `targetOptionValueCombination` - Indices of option values to look up in the encoded option value string. A partial set of indices may be passed to determine whether a node or any children is present. For example, if a product has 3 options, passing `[0]` will return true if any option value combination for the first option's option value is present in the encoded string.
- [parseGid](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/parsegid.txt): Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
- [parseMetafield](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/parsemetafield.txt): A function that uses `metafield.type` to parse the Metafield's `value` or `reference` or `references` (depending on the `metafield.type`) and places the result in `metafield.parsedValue`.
- [Storefront API Types](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/storefront-api-types.txt): If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.  These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.
- [createStorefrontClient](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/createstorefrontclient.txt): The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API.  When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop or consider using `<ShopifyProvider/>` instead.
- [Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/storefront-schema.txt): Hydrogen React ships with a pre-generated GraphQL schema for the Storefront API, which can integrate with your IDE and other GraphQL tooling (such as a [GraphQL config file](https://www.graphql-config.com/docs/user/user-usage)) to provide autocompletion and validation for your Storefront API GraphQL queries.  This schema is generated using the Storefront API's introspection query, and is available at `@shopify/hydrogen-react/storefront.schema.json`.  To get these features working in your IDE, you may need to install an extension. For example, in VSCode you can install this [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
- [useCart](https://shopify.dev/docs/api/hydrogen-react/2025-01/hooks/usecart.txt): Provides access to the cart object.
- [useCartLine](https://shopify.dev/docs/api/hydrogen-react/2025-01/hooks/usecartline.txt): The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
- [useMoney](https://shopify.dev/docs/api/hydrogen-react/2025-01/hooks/usemoney.txt): The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a     default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by     [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
- [useProduct](https://shopify.dev/docs/api/hydrogen-react/2025-01/hooks/useproduct.txt): Provides access to the product value passed to `<ProductProvider />`. It also includes properties for selecting product variants, options, and selling plans.
- [useSelectedOptionInUrlParam](https://shopify.dev/docs/api/hydrogen-react/2025-01/utilities/useselectedoptioninurlparam.txt): Sets the url params to the selected option.
- [useShop](https://shopify.dev/docs/api/hydrogen-react/2025-01/hooks/useshop.txt): Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
- [useShopifyCookies](https://shopify.dev/docs/api/hydrogen-react/2025-01/hooks/useshopifycookies.txt): Sets Shopify user and session cookies and refreshes the expiry time.