@shopify/hydrogen-react
v0.0.0-snapshot-20251209010610TypeScript
React components, hooks, and utilities for creating custom Shopify storefronts
0/weekUpdated todayMITUnpacked: 6.8 MB
Published by jaimie.way
npm install @shopify/hydrogen-reactHydrogen 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 | 🗣 Discussions | 📝 Changelog
IMPORTANT: Refer to how this package is versioned.
This document contains the following topics:
- Getting started with Hydrogen React
- Improving the Developer Experience
- Development and production bundles
- Hydrogen React in the browser
- Troubleshooting
- Contributing
Getting started
- Run one of the following commands:
npm:
``bash`
npm i --save @shopify/hydrogen-react
Yarn:
`bash`
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:
- Creating a storefront client to easily make API requests to the Storefront API
- Enabling GraphQL validation and autocompletion for the Storefront API
- Using the pre-built TypeScript types for the Storefront API
- Correctly typing the Storefront API's custom scalars when using GraphQL Codegen and TypeScript
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 tags in HTML or by AMD-compatible loaders.
If you're using Hydrogen React as a global through the