​
Import

import { Media } from "@0xsequence/marketplace-sdk/react";

​
Usage

​
Examples

Basic example of using the Media component to display an image:
import { Media } from "@0xsequence/marketplace-sdk/react";

export default function BasicExample() {
  return (
    <Media
      name="My Collectible"
      assets={["https://example.com/image.png"]}
      className="w-64 h-64"
    />
  );
}

​
Parameters

The component accepts the following props: 
interface MediaProps {
  name?: string;
  assets: (string | undefined)[];
  assetSrcPrefixUrl?: string;
  className?: string;
  containerClassName?: string;
  mediaClassname?: string;
  isLoading?: boolean;
  fallbackContent?: React.ReactNode;
  shouldListenForLoad?: boolean;
}
ParameterTypeDescription
namestringOptional name for the collectible, used as alt text for images
assets(string | undefined)[]Array of asset URLs to try loading. The component will attempt to load each asset in order until one succeeds
assetSrcPrefixUrlstringOptional URL prefix to prepend to asset URLs
classNamestringOptional CSS class name for the component container
containerClassNamestringOptional CSS class name for the outer container
mediaClassnamestringOptional CSS class name for the media element itself
isLoadingbooleanOptional flag to show loading state
fallbackContentReact.ReactNodeOptional custom content to display when no assets can be loaded
shouldListenForLoadbooleanOptional flag to enable/disable load event listeners (defaults to true)

​
Supported Media Types

The Media component automatically detects and handles different types of content:
  • Images: Renders standard image files (PNG, JPG, GIF, etc.)
  • Videos: Supports video files with autoplay, loop, and controls
  • 3D Models: Renders 3D models using ModelViewer component
  • HTML: Displays HTML content in a sandboxed iframe

​
Features

​
Automatic Content Type Detection

The component automatically detects the content type of the asset and renders the appropriate element: 
<Media
  assets={[
    "model.glb", // Will render as 3D model
    "video.mp4", // Will render as video
    "image.png", // Will render as image
    "content.html", // Will render as iframe
  ]}
/>

​
Fallback Chain

If an asset fails to load, the component will:
  1. Try the next asset in the assets array
  2. If all assets fail, display the custom fallback content
  3. If no fallback content is provided, show the default chess tile pattern

​
Loading States

The component includes built-in loading states: 
<Media
  assets={["https://example.com/large-image.png"]}
  isLoading={true} // Will show loading skeleton
/>

​
Notes

The Media component is designed to handle various types of collectible assets with built-in:
  • Automatic content type detection
  • Fallback handling
  • Loading states
  • Safari compatibility adjustments
When using with video content, note that:
  • Videos autoplay by default
  • Videos are muted by default for autoplay compatibility