IPFS Media Renderer

The IPFS Media Renderer component resolves any IPFS URI that contains a media file (such as an image, video, or audio file) and renders the relevant component to show that media. This is especially useful for two use cases:

1. Displaying the media assets of NFTs with metadata stored on IPFS
2. Rendering NFTs where you are unsure of the file type (i.e. you don't know if it's an image or video)

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

const Component = () => {
  return (
    <MediaRenderer
      src="ipfs://Qmb9ZV5yznE4C4YvyJe8DVFv1LSVkebdekY6HjLVaKmHZi"
      alt="A mp4 video"
    />
  );
};

Props

Prop	Required	Description	Type
src	Required	The URI of the media	string
poster	Optional	The media poster image uri. (if applicable)	string
controls	Optional	Show the media controls (where applicable) (default false)	boolean
height	Optional	Height of the element to render	string
width	Optional	Width of the element to render	string
requireInteraction	Optional	Require user interaction to play the media. (default false)	boolean
style	Optional	Additional CSS to style the rendered element	CSSProperties

Resources

Learn how to integrate the MediaRenderer component into your application.

Guide: Render IPFS Files In A React App