Function ThirdwebNftMedia

This component can be used to render NFTs from the thirdweb SDK. It will render the animation_url if it exists, otherwise it will render the image. The default size is 300px by 300px, but this can be changed using the width and height props.

Props: ThirdwebNftMediaProps

Example

import { ThirdwebNftMedia, useContract, useNFT } from "@thirdweb-dev/react";
export default function NFTCollectionRender() {
  const { contract } = useContract(<your-contract-address>);
  const { data: nft, isLoading } = useNFT(contract, 0);

  return (
    <div>
      {!isLoading && nft ? (
        <ThirdwebNftMedia metadata={nft.metadata} />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}
Copy