# MediaFile The `MediaFile` component renders the media for the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop. ```jsx import {MediaFile} from '@shopify/hydrogen'; export function ProductsMediaFiles({products}) { return ( ); } ``` ```tsx import {MediaFile} from '@shopify/hydrogen'; import type {ProductConnection} from '@shopify/hydrogen/storefront-api-types'; export function ProductsMediaFiles({products}: {products: ProductConnection}) { return ( ); } ``` ## Props MediaFile renders an `Image`, `Video`, `ExternalVideo`, or `ModelViewer` component. Use the `mediaOptions` prop to customize the props sent to each of these components. ### MediaFileProps ### about value: `string | undefined` ### accessKey value: `string | undefined` ### aria-activedescendant value: `string | undefined` Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. ### aria-atomic value: `Booleanish | undefined` Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. ### aria-autocomplete value: `'none' | 'inline' | 'list' | 'both' | undefined` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. ### aria-braillelabel value: `string | undefined` Defines a string value that labels the current element, which is intended to be converted into Braille. ### aria-brailleroledescription value: `string | undefined` Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. ### aria-busy value: `Booleanish | undefined` ### aria-checked value: `boolean | 'false' | 'mixed' | 'true' | undefined` Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. ### aria-colcount value: `number | undefined` Defines the total number of columns in a table, grid, or treegrid. ### aria-colindex value: `number | undefined` Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. ### aria-colindextext value: `string | undefined` Defines a human readable text alternative of aria-colindex. ### aria-colspan value: `number | undefined` Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. ### aria-controls value: `string | undefined` Identifies the element (or elements) whose contents or presence are controlled by the current element. ### aria-current value: `boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined` Indicates the element that represents the current item within a container or set of related elements. ### aria-describedby value: `string | undefined` Identifies the element (or elements) that describes the object. ### aria-description value: `string | undefined` Defines a string value that describes or annotates the current element. ### aria-details value: `string | undefined` Identifies the element that provides a detailed, extended description for the object. ### aria-disabled value: `Booleanish | undefined` Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. ### aria-dropeffect value: `'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined` Indicates what functions can be performed when a dragged object is released on the drop target. ### aria-errormessage value: `string | undefined` Identifies the element that provides an error message for the object. ### aria-expanded value: `Booleanish | undefined` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. ### aria-flowto value: `string | undefined` Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. ### aria-grabbed value: `Booleanish | undefined` Indicates an element's "grabbed" state in a drag-and-drop operation. ### aria-haspopup value: `boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. ### aria-hidden value: `Booleanish | undefined` Indicates whether the element is exposed to an accessibility API. ### aria-invalid value: `boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined` Indicates the entered value does not conform to the format expected by the application. ### aria-keyshortcuts value: `string | undefined` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. ### aria-label value: `string | undefined` Defines a string value that labels the current element. ### aria-labelledby value: `string | undefined` Identifies the element (or elements) that labels the current element. ### aria-level value: `number | undefined` Defines the hierarchical level of an element within a structure. ### aria-live value: `'off' | 'assertive' | 'polite' | undefined` Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. ### aria-modal value: `Booleanish | undefined` Indicates whether an element is modal when displayed. ### aria-multiline value: `Booleanish | undefined` Indicates whether a text box accepts multiple lines of input or only a single line. ### aria-multiselectable value: `Booleanish | undefined` Indicates that the user may select more than one item from the current selectable descendants. ### aria-orientation value: `'horizontal' | 'vertical' | undefined` Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. ### aria-owns value: `string | undefined` Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. ### aria-placeholder value: `string | undefined` Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. ### aria-posinset value: `number | undefined` Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. ### aria-pressed value: `boolean | 'false' | 'mixed' | 'true' | undefined` Indicates the current "pressed" state of toggle buttons. ### aria-readonly value: `Booleanish | undefined` Indicates that the element is not editable, but is otherwise operable. ### aria-relevant value: `'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. ### aria-required value: `Booleanish | undefined` Indicates that user input is required on the element before a form may be submitted. ### aria-roledescription value: `string | undefined` Defines a human-readable, author-localized description for the role of an element. ### aria-rowcount value: `number | undefined` Defines the total number of rows in a table, grid, or treegrid. ### aria-rowindex value: `number | undefined` Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. ### aria-rowindextext value: `string | undefined` Defines a human readable text alternative of aria-rowindex. ### aria-rowspan value: `number | undefined` Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. ### aria-selected value: `Booleanish | undefined` Indicates the current "selected" state of various widgets. ### aria-setsize value: `number | undefined` Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. ### aria-sort value: `'none' | 'ascending' | 'descending' | 'other' | undefined` Indicates if items in a table or grid are sorted in ascending or descending order. ### aria-valuemax value: `number | undefined` Defines the maximum allowed value for a range widget. ### aria-valuemin value: `number | undefined` Defines the minimum allowed value for a range widget. ### aria-valuenow value: `number | undefined` Defines the current value for a range widget. ### aria-valuetext value: `string | undefined` Defines the human readable text alternative of aria-valuenow for a range widget. ### autoCapitalize value: `string | undefined` ### autoCorrect value: `string | undefined` ### autoFocus value: `boolean | undefined` ### autoSave value: `string | undefined` ### children value: `ReactNode | undefined` ### className value: `string | undefined` ### color value: `string | undefined` ### content value: `string | undefined` ### contentEditable value: `Booleanish | "inherit" | undefined` ### contextMenu value: `string | undefined` ### dangerouslySetInnerHTML value: `{ // Should be InnerHTML['innerHTML']. // But unfortunately we're mixing renderer-specific type declarations. __html: string | TrustedHTML; } | undefined` ### data value: `PartialDeep` An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). ### datatype value: `string | undefined` ### defaultChecked value: `boolean | undefined` ### defaultValue value: `string | number | ReadonlyArray | undefined` ### dir value: `string | undefined` ### draggable value: `Booleanish | undefined` ### hidden value: `boolean | undefined` ### id value: `string | undefined` ### inlist value: `any` ### inputMode value: `'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined` Hints at the type of data that might be entered by the user while editing the element or its contents ### is value: `string | undefined` Specify that a standard HTML element should behave like a defined custom built-in element ### itemID value: `string | undefined` ### itemProp value: `string | undefined` ### itemRef value: `string | undefined` ### itemScope value: `boolean | undefined` ### itemType value: `string | undefined` ### lang value: `string | undefined` ### mediaOptions value: `MediaOptions` The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. ### nonce value: `string | undefined` ### onAbort value: `ReactEventHandler | undefined` ### onAbortCapture value: `ReactEventHandler | undefined` ### onAnimationEnd value: `AnimationEventHandler | undefined` ### onAnimationEndCapture value: `AnimationEventHandler | undefined` ### onAnimationIteration value: `AnimationEventHandler | undefined` ### onAnimationIterationCapture value: `AnimationEventHandler | undefined` ### onAnimationStart value: `AnimationEventHandler | undefined` ### onAnimationStartCapture value: `AnimationEventHandler | undefined` ### onAuxClick value: `MouseEventHandler | undefined` ### onAuxClickCapture value: `MouseEventHandler | undefined` ### onBeforeInput value: `FormEventHandler | undefined` ### onBeforeInputCapture value: `FormEventHandler | undefined` ### onBlur value: `FocusEventHandler | undefined` ### onBlurCapture value: `FocusEventHandler | undefined` ### onCanPlay value: `ReactEventHandler | undefined` ### onCanPlayCapture value: `ReactEventHandler | undefined` ### onCanPlayThrough value: `ReactEventHandler | undefined` ### onCanPlayThroughCapture value: `ReactEventHandler | undefined` ### onChange value: `FormEventHandler | undefined` ### onChangeCapture value: `FormEventHandler | undefined` ### onClick value: `MouseEventHandler | undefined` ### onClickCapture value: `MouseEventHandler | undefined` ### onCompositionEnd value: `CompositionEventHandler | undefined` ### onCompositionEndCapture value: `CompositionEventHandler | undefined` ### onCompositionStart value: `CompositionEventHandler | undefined` ### onCompositionStartCapture value: `CompositionEventHandler | undefined` ### onCompositionUpdate value: `CompositionEventHandler | undefined` ### onCompositionUpdateCapture value: `CompositionEventHandler | undefined` ### onContextMenu value: `MouseEventHandler | undefined` ### onContextMenuCapture value: `MouseEventHandler | undefined` ### onCopy value: `ClipboardEventHandler | undefined` ### onCopyCapture value: `ClipboardEventHandler | undefined` ### onCut value: `ClipboardEventHandler | undefined` ### onCutCapture value: `ClipboardEventHandler | undefined` ### onDoubleClick value: `MouseEventHandler | undefined` ### onDoubleClickCapture value: `MouseEventHandler | undefined` ### onDrag value: `DragEventHandler | undefined` ### onDragCapture value: `DragEventHandler | undefined` ### onDragEnd value: `DragEventHandler | undefined` ### onDragEndCapture value: `DragEventHandler | undefined` ### onDragEnter value: `DragEventHandler | undefined` ### onDragEnterCapture value: `DragEventHandler | undefined` ### onDragExit value: `DragEventHandler | undefined` ### onDragExitCapture value: `DragEventHandler | undefined` ### onDragLeave value: `DragEventHandler | undefined` ### onDragLeaveCapture value: `DragEventHandler | undefined` ### onDragOver value: `DragEventHandler | undefined` ### onDragOverCapture value: `DragEventHandler | undefined` ### onDragStart value: `DragEventHandler | undefined` ### onDragStartCapture value: `DragEventHandler | undefined` ### onDrop value: `DragEventHandler | undefined` ### onDropCapture value: `DragEventHandler | undefined` ### onDurationChange value: `ReactEventHandler | undefined` ### onDurationChangeCapture value: `ReactEventHandler | undefined` ### onEmptied value: `ReactEventHandler | undefined` ### onEmptiedCapture value: `ReactEventHandler | undefined` ### onEncrypted value: `ReactEventHandler | undefined` ### onEncryptedCapture value: `ReactEventHandler | undefined` ### onEnded value: `ReactEventHandler | undefined` ### onEndedCapture value: `ReactEventHandler | undefined` ### onError value: `ReactEventHandler | undefined` ### onErrorCapture value: `ReactEventHandler | undefined` ### onFocus value: `FocusEventHandler | undefined` ### onFocusCapture value: `FocusEventHandler | undefined` ### onGotPointerCapture value: `PointerEventHandler | undefined` ### onGotPointerCaptureCapture value: `PointerEventHandler | undefined` ### onInput value: `FormEventHandler | undefined` ### onInputCapture value: `FormEventHandler | undefined` ### onInvalid value: `FormEventHandler | undefined` ### onInvalidCapture value: `FormEventHandler | undefined` ### onKeyDown value: `KeyboardEventHandler | undefined` ### onKeyDownCapture value: `KeyboardEventHandler | undefined` ### onKeyPress value: `KeyboardEventHandler | undefined` ### onKeyPressCapture value: `KeyboardEventHandler | undefined` ### onKeyUp value: `KeyboardEventHandler | undefined` ### onKeyUpCapture value: `KeyboardEventHandler | undefined` ### onLoad value: `ReactEventHandler | undefined` ### onLoadCapture value: `ReactEventHandler | undefined` ### onLoadedData value: `ReactEventHandler | undefined` ### onLoadedDataCapture value: `ReactEventHandler | undefined` ### onLoadedMetadata value: `ReactEventHandler | undefined` ### onLoadedMetadataCapture value: `ReactEventHandler | undefined` ### onLoadStart value: `ReactEventHandler | undefined` ### onLoadStartCapture value: `ReactEventHandler | undefined` ### onLostPointerCapture value: `PointerEventHandler | undefined` ### onLostPointerCaptureCapture value: `PointerEventHandler | undefined` ### onMouseDown value: `MouseEventHandler | undefined` ### onMouseDownCapture value: `MouseEventHandler | undefined` ### onMouseEnter value: `MouseEventHandler | undefined` ### onMouseLeave value: `MouseEventHandler | undefined` ### onMouseMove value: `MouseEventHandler | undefined` ### onMouseMoveCapture value: `MouseEventHandler | undefined` ### onMouseOut value: `MouseEventHandler | undefined` ### onMouseOutCapture value: `MouseEventHandler | undefined` ### onMouseOver value: `MouseEventHandler | undefined` ### onMouseOverCapture value: `MouseEventHandler | undefined` ### onMouseUp value: `MouseEventHandler | undefined` ### onMouseUpCapture value: `MouseEventHandler | undefined` ### onPaste value: `ClipboardEventHandler | undefined` ### onPasteCapture value: `ClipboardEventHandler | undefined` ### onPause value: `ReactEventHandler | undefined` ### onPauseCapture value: `ReactEventHandler | undefined` ### onPlay value: `ReactEventHandler | undefined` ### onPlayCapture value: `ReactEventHandler | undefined` ### onPlaying value: `ReactEventHandler | undefined` ### onPlayingCapture value: `ReactEventHandler | undefined` ### onPointerCancel value: `PointerEventHandler | undefined` ### onPointerCancelCapture value: `PointerEventHandler | undefined` ### onPointerDown value: `PointerEventHandler | undefined` ### onPointerDownCapture value: `PointerEventHandler | undefined` ### onPointerEnter value: `PointerEventHandler | undefined` ### onPointerEnterCapture value: `PointerEventHandler | undefined` ### onPointerLeave value: `PointerEventHandler | undefined` ### onPointerLeaveCapture value: `PointerEventHandler | undefined` ### onPointerMove value: `PointerEventHandler | undefined` ### onPointerMoveCapture value: `PointerEventHandler | undefined` ### onPointerOut value: `PointerEventHandler | undefined` ### onPointerOutCapture value: `PointerEventHandler | undefined` ### onPointerOver value: `PointerEventHandler | undefined` ### onPointerOverCapture value: `PointerEventHandler | undefined` ### onPointerUp value: `PointerEventHandler | undefined` ### onPointerUpCapture value: `PointerEventHandler | undefined` ### onProgress value: `ReactEventHandler | undefined` ### onProgressCapture value: `ReactEventHandler | undefined` ### onRateChange value: `ReactEventHandler | undefined` ### onRateChangeCapture value: `ReactEventHandler | undefined` ### onReset value: `FormEventHandler | undefined` ### onResetCapture value: `FormEventHandler | undefined` ### onResize value: `ReactEventHandler | undefined` ### onResizeCapture value: `ReactEventHandler | undefined` ### onScroll value: `UIEventHandler | undefined` ### onScrollCapture value: `UIEventHandler | undefined` ### onSeeked value: `ReactEventHandler | undefined` ### onSeekedCapture value: `ReactEventHandler | undefined` ### onSeeking value: `ReactEventHandler | undefined` ### onSeekingCapture value: `ReactEventHandler | undefined` ### onSelect value: `ReactEventHandler | undefined` ### onSelectCapture value: `ReactEventHandler | undefined` ### onStalled value: `ReactEventHandler | undefined` ### onStalledCapture value: `ReactEventHandler | undefined` ### onSubmit value: `FormEventHandler | undefined` ### onSubmitCapture value: `FormEventHandler | undefined` ### onSuspend value: `ReactEventHandler | undefined` ### onSuspendCapture value: `ReactEventHandler | undefined` ### onTimeUpdate value: `ReactEventHandler | undefined` ### onTimeUpdateCapture value: `ReactEventHandler | undefined` ### onTouchCancel value: `TouchEventHandler | undefined` ### onTouchCancelCapture value: `TouchEventHandler | undefined` ### onTouchEnd value: `TouchEventHandler | undefined` ### onTouchEndCapture value: `TouchEventHandler | undefined` ### onTouchMove value: `TouchEventHandler | undefined` ### onTouchMoveCapture value: `TouchEventHandler | undefined` ### onTouchStart value: `TouchEventHandler | undefined` ### onTouchStartCapture value: `TouchEventHandler | undefined` ### onTransitionEnd value: `TransitionEventHandler | undefined` ### onTransitionEndCapture value: `TransitionEventHandler | undefined` ### onVolumeChange value: `ReactEventHandler | undefined` ### onVolumeChangeCapture value: `ReactEventHandler | undefined` ### onWaiting value: `ReactEventHandler | undefined` ### onWaitingCapture value: `ReactEventHandler | undefined` ### onWheel value: `WheelEventHandler | undefined` ### onWheelCapture value: `WheelEventHandler | undefined` ### placeholder value: `string | undefined` ### prefix value: `string | undefined` ### property value: `string | undefined` ### radioGroup value: `string | undefined` ### rel value: `string | undefined` ### resource value: `string | undefined` ### results value: `number | undefined` ### rev value: `string | undefined` ### role value: `AriaRole | undefined` ### security value: `string | undefined` ### slot value: `string | undefined` ### spellCheck value: `Booleanish | undefined` ### style value: `CSSProperties | undefined` ### suppressContentEditableWarning value: `boolean | undefined` ### suppressHydrationWarning value: `boolean | undefined` ### tabIndex value: `number | undefined` ### title value: `string | undefined` ### translate value: `'yes' | 'no' | undefined` ### typeof value: `string | undefined` ### unselectable value: `'on' | 'off' | undefined` ### vocab value: `string | undefined` ### MediaOptions ### externalVideo value: `Omit< React.ComponentProps['options'], 'data' >` Props that will only apply when an `` is rendered ### image value: `Omit` Props that will only apply when an `` is rendered ### modelViewer value: `Omit` Props that will only apply when a `` is rendered ### video value: `Omit, 'data'>` Props that will only apply when a `