IPFS Renderer

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

import { MediaRenderer } from "@thirdweb-dev/react";

Usage

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" />
  );
}

Live Demo

Edit the code below to see how it works!

Note: this playground uses the Goerli test network.

Editor

function Home() {
  return (
    <MediaRenderer 
      src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X" 
    />
  );
}

Preview

Storage CLI

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

Configuration

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
      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"
      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"
      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}
      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}
      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}
      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}
      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}
      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}
      style={{ backgroundColor: "red" }}
    />
  );
}