MediaFile component renders the media for the Storefront API's
Media object. It renders 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 codeAnchor link to section titled "Example code"
||An object with fields that correspond to the Storefront API's Media object.|
||The options for the
Required fieldsAnchor link to section titled "Required fields"
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
ModelViewer for additional required fields.
Component typeAnchor link to section titled "Component type"
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.