NFT Renderer

Component that renders an NFT from given a metadata object.

Under the hood, if the image property of the metadata is an URL/IPFS URI, it is fetched from the source. The mime type of the asset is determined and the appropriate component is rendered on the UI.

For example, if your NFT is 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 { ThirdwebNftMedia } from "@thirdweb-dev/react";

Usage

Provide the metadata object to the component to render the NFT.

The NFT’s image is used as the media, and the name is used as the alt text for the media.

import { ThirdwebNftMedia, useContract, useNFT } from "@thirdweb-dev/react";

function Home() {
  // Connect to your NFT contract
  const { contract } = useContract("{{contract_address}}");
  // Load the NFT metadata from the contract using a hook
  const { data: nft, isLoading, error } = useNFT(contract, "0");

  // Render the NFT onto the UI
  if (isLoading) return <div>Loading...</div>;
  if (error || !nft) return <div>NFT not found</div>;

  return <ThirdwebNftMedia metadata={nft.metadata} />;
}

Live Demo

Edit the code below to see how it works!

Note: this playground uses the Goerli test network.

Editor

function Home() {
  const { contract } = useContract(
    "0xb413df01580659F671471956e9D2fAe989d1dcd3"
  );
  const { data: nft, isLoading, error } = useNFT(contract, "0");

  if (isLoading) return <div>Loading...</div>;
  if (error || !nft) return <div>NFT not found</div>;

  return <ThirdwebNftMedia metadata={nft.metadata} />;
}

Preview

Configuration

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