TypeScript icon, indicating that this package has built-in type declarations

2023.1.7 • Public • Published

Hydrogen React

Hydrogen React is an unopinionated and performant library of Shopify-specific commerce components, hooks, and utilities. Bring the best parts of Hydrogen to more React frameworks, like Next.js and Gatsby, and accelerate headless development using Shopify’s pre-built React components including Cart, Shop Pay, and Shopify Analytics.

📚 Overview | 🛠️ Docs | 🛍️ Custom Storefronts at Shopify | 🗣 Discord | 📝 Changelog

IMPORTANT: Refer to how this package is versioned.

This document contains the following topics:

Getting started

  • Run one of the following commands:


    npm i --save @shopify/hydrogen-react


    yarn add @shopify/hydrogen-react

Browse our overview and docs to learn more.

Improving the Developer Experience

hydrogen-react includes several tools that improve the developer experience, such as:

Development and production bundles

Hydrogen React has a development bundle and a production bundle. The development bundle has warnings and messages that the production bundle doesn't.

Depending on the bundler or runtime that you're using, the correct bundle might be automatically chosen following the package.json#exports of Hydrogen React. If not, then you might need to configure your bundler / runtime to use the development and production conditions.

Note: The production bundle is used by default if your bundler / runtime doesn't understand the export conditions.

Hydrogen React in the browser

Hydrogen React has a development umd build and a production umd build. Both are meant to be used directly either by <script src=""></script> tags in HTML or by AMD-compatible loaders.

If you're using Hydrogen React as a global through the <script> tag, then the components can be accessed through the hydrogenreact global variable.


The following will help you troubleshoot common problems in this version of Hydrogen React.

GraphQL autocompletion

If you can't get GraphQL autocompletion to work, then try restarting the GraphQL server in your IDE.

For example, in VSCode do the following:

  1. Open the command palette.
  2. Type graphql.
  3. Select VSCode GraphQL: Manual Restart.


We love contributions! Contributing works best when you first confirm that something needs to be changed or fixed; please open an issue, start a discussion, or talk to us in Discord!

PRs are welcome! Be sure to read the CONTRIBUTING.md for an overview and guidelines to help your PR succeed.




npm i @shopify/hydrogen-react

DownloadsWeekly Downloads






Unpacked Size

4.21 MB

Total Files


Last publish


  • shopify-admin
  • maryharte
  • crisfmb
  • pmoloney89
  • netlohan
  • st999999
  • justin-irl
  • megswim
  • michaelarsenault
  • wcandillon
  • jplhomer
  • marytal
  • nathanpjf
  • shopify-dep
  • goodforonefare
  • lemonmade
  • vsumner
  • wizardlyhel
  • antoine.grant
  • tsov
  • andyw8-shopify
  • henrytao
  • hannachen
  • andrewapperley
  • iainmcampbell
  • vividviolet
  • bpscott