Skip to main content

MediaRenderer variable

This component can be used to render any media type, including image, audio, video, and html files. Its convenient for rendering NFT media files, as these can be a variety of different types. The component falls back to a external link if the media type is not supported.

Props: MediaRendererProps

Example

We can take a video file hosted on IPFS and render it using this component as follows

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

You can try switching out the src prop to different types of URLs and media types to explore the possibilities.

Signature:

MediaRenderer: React.ForwardRefExoticComponent<
MediaRendererProps & React.RefAttributes<HTMLMediaElement>
>;