---
title: Hydrogen React
description: >
  Hydrogen React is an unopinionated and performant library of Shopify-specific
  React components, reusable functions, and utilities for interacting with the
  Storefront API. This guide provides a complete reference of the components,
  hooks, and utilities that Hydrogen React offers, and their relationships to
  each other.
api_version: 2023-01
api_name: hydrogen-react
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/2023-01'
  md: 'https://shopify.dev/docs/api/hydrogen-react/2023-01.md'
---

# Hydrogen React

Hydrogen React is an unopinionated and performant library of Shopify-specific React components, reusable functions, and utilities for interacting with the Storefront API. This guide provides a complete reference of the components, hooks, and utilities that Hydrogen React offers, and their relationships to each other.

## Setup

1. Run one of the example commands to install the package
2. Import the component, hook, or utility that you want to use in your app. For more detailed instructions, see the Getting Started Guide.

[Navigate to - Getting Started Guide](https://shopify.dev/custom-storefronts/hydrogen-react#get-started-with-hydrogen-react)

## Install the Hydrogen React package

##### npm

```text
npm i --save @shopify/hydrogen-react
```

##### yarn

```text
yarn add @shopify/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). Refer to [Get started with Hydrogen React](https://shopify.dev/custom-storefronts/hydrogen-react#get-started-with-hydrogen-react) for instructions on how to get an access token and set up the Storefront API client.

[Navigate to - Enable Storefront API Access](https://shopify.dev/custom-storefronts/hydrogen-react#step-2-enable-storefront-api-access)

***

## Versioning

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

Caution

If the Storefront API version update includes breaking changes, then Hydrogen React includes breaking changes. Because the API version is updated every three months, breaking changes to Hydrogen React could occur every three months.

Learn more about [API versioning](https://shopify.dev/api/usage/versioning).

***

## Components

A component encapsulates all of the business logic and data parsing/processing for the concept it represents and outputs limited, sensible markup. Components provide defaults, but allow customizations and provide no visual styles, other than those provided natively by the browser.

## Component example

## Component

```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 stateful logic. These functions allow you to leverage the business logic and state management functions used in the components with more flexibility.

## Hook example

## Hook

```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 data manipulations performed on Storefront API data.

## Utility example

## Utility

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

***

## Resources

[Custom Storefronts\
\
](https://shopify.dev/custom-storefronts)

[Learn more about how to design, build, and manage, your custom storefront.](https://shopify.dev/custom-storefronts)

[Getting started guide\
\
](https://shopify.dev/custom-storefronts/hydrogen-react#get-started-with-hydrogen-react)

[Follow this tutorial to get started with Hydrogen React.](https://shopify.dev/custom-storefronts/hydrogen-react#get-started-with-hydrogen-react)

[Hydrogen React README\
\
](https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen-react/README.md)

[Get more details on how to improve your end-to-end development experience.](https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen-react/README.md)

***