How to Render IPFS Media In a React App

How to Render IPFS Media In a React App - thirdweb Guides

⚠️ Warning: This guide currently uses v4 of the Connect SDK. For v5 (latest) code snippets, please check out our documentation while this guide is being updated. ⚠️

In this guide, we'll show you how to render IPFS files like images, videos, and audio files within a React application by using the MediaRenderer UI component available in our React SDK.

Before we get started, below are some helpful resources where you can learn more about the tools we will use in this guide.

Let's get started.

Create A React Application

I am going to use the Next.js Typescript starter template for this guide.

💡
An API key is required to use thirdweb's infrastructure services, such as storage, RPCs, and Smart Wallet infrastructure from within the SDK. If you haven't created a key yet, you can do so for free from the thirdweb dashboard.To use an API key with the React SDK, pass the clientId to the ThirdwebProvider.

If you are following along with the guide, you can create a project with the template using the thirdweb CLI:

npx thirdweb create app --next --ts

If you already have a Next.js app, you can follow the frontend application setup.

Rendering Files Stored In IPFS

If you want to render a media assset stored in IPFS, simply import the MediaRenderer component from the @thirdweb-dev/react package like this:

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

And use this component simply by passing in the ipfs url as the src:

<MediaRenderer
  src="ipfs://QmeMHMZVXQCWTjiMmQeQ3g1cQ5FHz5Yypf9wsBW8anR1RR/0.png"
  alt="A Blue Circle"
/>

In this example, our IPFS URL points to an image of a blue circle, which is rendered on the UI:

Render an IPFS image

Depending on what asset your URL points to, the relevant HTML element is rendered on the UI.

For example, if your URL points to a video stored in IPFS, that works too without any changes:

Render a video hosted on IPFS

Rendering Multiple IPFS Files

If you want to render multiple IPFS files at once, such as render all the NFTs of an NFT collection, you can do that too!

First, connect to your smart contract like this:

  const { contract } = useContract(
    "0x05B8aab3fd77580C29c6510d8C54D9E6be4262d2"
  );

  const { data: nfts } = useNFTs(contract, {
    start: 0,
    count: 10,
  });

Then, map through the nfts and render them like this:

 {nfts?.map((nft) => (
        <MediaRenderer
          key={nft.metadata.id}
          src={nft.metadata.image}
          alt={String(nft.metadata.name)}
          style={{
            maxWidth: "200px",
          }}
        />
      ))}
Render NFTs

We can render all the NFT images which are stored on IPFS very easily with the MediaRenderer component! We can also customize it with the style property as I have done here.

Conclusion

In this guide, we learned how to render IPFS files easily in a react app.

Let us know if you have any questions in our Discord!