Skip to main content

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.

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

Example​

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