thirdwebDocs
GitHub

NFTMedia

This component fetches and displays an NFT's media. It uses thirdweb MediaRenderer under the hood so you can style it just like how you would style a MediaRenderer.

Example

Basic usage

import { NFTProvider, NFTMedia } from "thirdweb/react";
 
<NFTProvider>
  <NFTMedia />
</NFTProvider>;

Show a loading sign while the media is being fetched

import { NFTProvider, NFTMedia } from "thirdweb/react";
 
<NFTProvider>
  <NFTMedia loadingComponent={<YourLoadingSign />} />
</NFTProvider>;

Show something in case the media failed to resolve

import { NFTProvider, NFTMedia } from "thirdweb/react";
 
<NFTProvider>
  <NFTMedia fallbackComponent={<span>Failed to load media</span>} />
</NFTProvider>;

Custom query options for useQuery (tanstack-query)

import { NFTProvider, NFTMedia } from "thirdweb/react";
 
<NFTProvider>
  <NFTMedia queryOptions={{ retry: 3, enabled: false }} />
</NFTProvider>;

Basic stylings

You can style NFTMedia with the style and className props.

<NFTMedia style={{ borderRadius: "8px" }} className="mx-auto" />;
function NFTMedia(__namedParameters: NFTMediaProps): null | Element;

Parameters

Type

let __namedParameters: Omit<
  "src" | "poster" | "client"
> & {
  fallbackComponent?: JSX.Element;
  loadingComponent?: JSX.Element;
  queryOptions?: Omit<UseQueryOptions<NFT>, "queryFn" | "queryKey">;
};

Returns

let returnType: null | Element;

A MediaRenderer component