NFT Metadata Renderer

Functions in the TypeScript and React SDKs resolve the metadata of NFTs for you automatically in a standard format, containing the owner and metadata (name, image, description, etc.) of each NFT returned.

import { useContract, useNFT, ThirdwebNftMedia } from "@thirdweb-dev/react";
export default function NFTCollectionRender() {
  // Get your NFT Collection using it's contract address
  const { contract } = useContract("<your-contract-address>");

  // Load (and cache) the metadata for the NFT with token ID 0
  const { data: nft, isLoading } = useNFT(contract, 0);

  // Render the NFT metadata using the `ThirdwebNftMedia` component
  return (
    <div>
      {!isLoading && nft ? (
        <ThirdwebNftMedia metadata={nft.metadata} />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

This allows you to easily render NFTs on the UI using the ThirdwebNftMedia component, which accepts this metadata format as a parameter and renders the NFT correctly for every media type.

This removes the complexity of resolving the media type of the NFT media (such as determining whether it is a video, image, or audio) and provides a consistent way to render NFTs on the UI.

Example: Render All the NFTs in an NFT Collection

Props

Prop	Required	Description	Type
metadata	Required	The metadata of the NFT	NFTMetadata
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 NFT Metadata In a React App