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.