MediaFile
The MediaFile component renders the media for the Storefront API's
Media object. It renders an Image, a
Video, an ExternalVideo, or a ModelViewer depending on the mediaContentType of the
media provided as a prop.
The component outputs the HTML element that corresponds to the rendered Hydrogen component. You can customize this component using passthrough props.
Example code
Anchor link to section titled "Example code"
| Name | Type | Description |
|---|---|---|
| data | PartialDeep<MediaEdgeType['node']> |
An object with fields that correspond to the Storefront API's Media object. |
| options? | React.ComponentProps<typeof Video>['options'] | React.ComponentProps<typeof ExternalVideo>['options'] | React.ComponentProps<typeof Image>['options'] |
The options for the Image, Video, or ExternalVideo components. |
Required fields
Anchor link to section titled "Required fields"The MediaFile component requires the following field from the Storefront API's
Media object, as well as additional fields depending on the type of media. Refer to Image,
Video, ExternalVideo, and ModelViewer for additional required fields.
Component type
Anchor link to section titled "Component type"The MediaFile component is a shared component, which means that it renders on both the server and the client. For more information about component types, refer to React Server Components.