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. The default size is 300px by 300px, but this can be changed using the width and height props.

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>
>;