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" />;

Override the media with the mediaResolver prop

If you already have the url, you can skip the network requests and pass it directly to the NFTMedia

<NFTMedia
  mediaResolver={{
    src: "/cat_video.mp4",
    // Poster is applicable to medias that are videos and audios
    poster: "/cat-image.png",
  }}
/>;

You can also pass in your own custom (async) function that retrieves the media url

const getMedia = async () => {
  const url = getNFTMedia(props);
  return url;
};
 
<NFTMedia mediaResolver={getMedia} />;
function NFTMedia(__namedParameters: NFTMediaProps): null | Element;

Parameters

Type

let __namedParameters: Omit<
  "src" | "poster" | "client"
> & {
  fallbackComponent?: JSX.Element;
  loadingComponent?: JSX.Element;
  mediaResolver?:
    | (() => NFTMediaInfo)
    | (() => Promise<NFTMediaInfo>);
  queryOptions?: Omit<
    UseQueryOptions<NFTMediaInfo>,
    "queryFn" | "queryKey"
  >;
};

Returns

let returnType: null | Element;

A MediaRenderer component