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