MediaRenderer

Component that renders any asset stored on IPFS (or anywhere else), given the IPFS URI / URL.

Under the hood, the asset is fetched from IPFS through the thirdweb IPFS gateway (or just a regular fetch if the src is not an IPFS URI). The mime type of the asset is determined and the appropriate component is rendered on the UI.

For example, if the URI points to an image, the img tag will be used. If it is a video, the video tag will be used, etc. The component currently supports:

Images
Videos
Audio files
3D Models
SVGs (for on-chain NFTs )
iframes and HTML
If none of these are appropriate, the fallback is a link to the asset

The default size of rendered media is 300px x 300px, but this can be changed using the width and height props.

You can use npx thirdweb upload <path/to/file> to upload any file to IPFS and get the IPFS URI.

Example

Provide the IPFS URI (or any URL that points to media) to the src prop to render the asset.


import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    // Any URL that points to media (IPFS URI, HTTP URL, etc.)
    <MediaRenderer src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X" />
  );
}

Parameters

The props for the component

src (required)

The src attribute specifies the URL of the media.

This can be an IPFS URI, or any URL that points to media (e.g. HTTP URL, etc.).


import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    <MediaRenderer
      // highlight-next-line
      src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X"
    />
  );
}

alt (recommended)

The alt attributes provides alternative information for the media, if a user for some reason cannot view it (due to slow connection, an error in the src attribute, or if the user is visually impaired).

The default value is "" .


import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    // Any URL that points to media (IPFS URI, HTTP URL, etc.)
    <MediaRenderer
      src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X"
      // highlight-next-line
      alt="A red circle"
    />
  );
}

poster (optional)

The poster is the image that is shown before the video is played.

The default value is the first frame of the video.

If the src is not a video, this prop is ignored.


import { MediaRenderer } from "@thirdweb-dev/react";
 
function Home() {
  return (
    // Any URL that points to media (IPFS URI, HTTP URL, etc.)
    <MediaRenderer
      src="ipfs://Qmb9ZV5yznE4C4YvyJe8DVFv1LSVkebdekY6HjLVaKmHZi"
      // highlight-next-line
      poster="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X"
    />
  );
}

controls (optional)

Show the media controls (play, pause, etc.) for the media, where applicable.

The default value is false .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      controls={true}
    />
  );
}

height (optional)

The height of the rendered media.

The default value is auto .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      height={500}
    />
  );
}

width (optional)

The width of the rendered media.

The default value is auto .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      width={500}
    />
  );
}

requireInteraction (optional)

Require user interaction to play the media (i.e. disable autoplay).

The default value is false .


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      requireInteraction={true}
    />
  );
}

className (optional)

Apply custom CSS styles to the button using a class name.


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      className="my-custom-class"
    />
  );
}

style (optional)

Apply custom CSS styles to the button using an inline style.


import { ThirdwebNftMedia } from "@thirdweb-dev/react";
 
function Home() {
  // ... Get the NFT metadata
 
  return (
    <ThirdwebNftMedia
      metadata={metadata}
      // highlight-next-line
      style={{ backgroundColor: "red" }}
    />
  );
}

Type


let props: MediaRendererProps & RefAttributes<HTMLMediaElement>;