Hydrogen components overview
Hydrogen components are objects that contain all of business logic for the commerce concept that they represent. They're used to parse and process data.
Framework components
Anchor link to section titled "Framework components"Framework components are components that are available in the Hydrogen framework.
| Component name | Component type | Description |
|---|---|---|
| Cookie | Server | Helps you build your own custom cookie and session implementations. |
| CookieSessionStorage | Server | The default session storage mechanism for Hydrogen. |
| FileRoutes | Server | Builds a set of default Hydrogen routes based on the output provided by Vite's import.meta.globEager method. |
| FileSessionStorage | Server | Persists session data to the file system. |
| Link | Client | Used to navigate between routes. |
| MemorySessionStorage | Server | Stores session data within Hydrogen runtime memory. |
| Route | Server | Used to set up a route in Hydrogen that's independent of the file system. |
| Router | Server | Provides the context for routing in your Hydrogen app. |
Primitive components
Anchor link to section titled "Primitive components"Primitive components are the building blocks for different component types, including products, variants, and cart.
| Component name | Component type | Description |
|---|---|---|
| ExternalVideo | Shared | Renders an embedded video for the Storefront API's ExternalVideo object. |
| Image | Shared | Renders an image for the Storefront API's Image object. |
| MediaFile | Shared | Renders the media for the Storefront API's Media object. It either renders an Image, a Video, an ExternalVideo, or a ModelViewer depending on the mediaContentType of the media provided as a prop. |
| Metafield | Client | Renders the value of the Storefront API's Metafield object. |
| ModelViewer | Client | Renders a 3D model (with the model-viewer tag) for the Storefront API's Model3d object. |
| Money | Client | Renders a string of the Storefront API's MoneyV2 object according to the defaultLocale in the hydrogen.config.js file. |
| Seo | Shared | Renders SEO information on a webpage. |
| ShopPayButton | Client | Renders a button that redirects to the Shop Pay checkout. |
| UnitPrice | Client | Renders a string of a unit price. |
| Video | Shared | Renders a video for the Storefront API's Video object. |
Global components
Anchor link to section titled "Global components"Global components wrap your entire app. Hydrogen includes the ShopifyProvider component.
Product and variant components
Anchor link to section titled "Product and variant components"Product and variant components relate to the goods, digital downloads, services, and gift cards that a merchant sells. If a product has options, like size or color, then merchants can add a variant for each combination of options.
| Component name | Component type | Description |
|---|---|---|
| ProductDescription | Client | Renders a div component with the product's descriptionHtml. |
| ProductMetafield | Client | Renders a Metafield component with a product metafield. |
| ProductPrice | Client | Renders a Money component with the product priceRange's maxVariantPrice or minVariantPrice, or the product compareAtPriceRange's maxVariantPrice or minVariantPrice. |
| ProductProvider | Client | Sets up a context with product details. |
| ProductTitle | Client | Renders a span element with the product's title. |
Cart components
Anchor link to section titled "Cart components"Cart components relate to the merchandise that a customer intends to purchase.
| Component name | Component type | Description |
|---|---|---|
| AddToCartButton | Client | Renders a button that adds an item to the cart when pressed. |
| BuyNowButton | Shared | Renders a button that adds an item to the cart and redirects the customer to checkout. |
| CartCheckoutButton | Client | Renders a button that redirects to the checkout URL for the cart. |
| CartEstimatedCost | Client | Renders a Money component for various amount types related to cart. |
| CartLineImage | Client | Renders an Image component for the cart line merchandise's image. |
| CartLinePrice | Client | Renders a Money component for the cart line merchandise's price or compare at price. |
| CartLineProductTitle | Client | Renders a span element (or the type of HTML element specified by the as prop) with the cart line merchandise's title. |
| CartLineProvider | Client | Creates a context for using a cart line. |
| CartLineQuantity | Client | Renders a span element (or the type of HTML element specified by the as prop) with the cart line's quantity. |
| CartLineQuantityAdjustButton | Shared | Renders a button that adjusts the cart line's quantity when pressed. |
| CartLines | Shared | Iterates over each cart line and renders its children within a CartLineProvider for each cart line. |
| CartProvider | Client | Creates a context for using a cart. |
| CartShopPayButton | Client | Renders a ShopPayButton for the items in the cart. |
Localization components
Anchor link to section titled "Localization components"Localization components relate to creating shopping experiences for a global audience in local languages and currencies. Hydrogen includes the LocalizationProvider component.
Customizing Hydrogen components
Anchor link to section titled "Customizing Hydrogen components"You can customize Hydrogen components using passthrough and render props.
- Passthrough props: You can pass attributes as props to the Hydrogen component, and the Hydrogen component will pass them through to the rendered HTML tag.
- Render props: You can pass a function that returns JSX as a child to the Hydrogen component.
Image component example
Anchor link to section titled "Image component example"The Image component by default takes a single prop, image, which corresponds to the Storefront API Image object. It outputs an image tag with the src and alt attributes taken from the image url and image altText:
Any attributes supported by the component's outputted HTML tag are supported, except for those explicitly controlled by the component. For example, the src attribute for the Image component is explicitly controlled by the component.
If you wanted to include a class name and an onClick function, then you could use the className and onClick props: