useNFT

Hook for fetching information about an NFT from a smart contract.

Available to use on smart contracts that implement the ERC721 or ERC1155 standard.

NFT metadata is automatically fetched from where the tokenUri is hosted (e.g. IPFS), and makes the image property available as a URL through our IPFS gateway (if the image is hosted on IPFS).

import { useNFT } from "@thirdweb-dev/react";

Usage

Provide your NFT collection contract object and the token ID of the NFT you want to fetch as arguments.

import { useContract, useNFT } from "@thirdweb-dev/react";

// The token ID of the NFT you want to fetch
const tokenId = 0;

function App() {
  const { contract } = useContract("{{contract_address}}");
  const { data: nft, isLoading, error } = useNFT(contract, tokenId);

  if (isLoading) return <div>Fetching NFT…</div>;
  if (error) return <div>Error fetching NFT</div>;
  if (!nft) return <div>NFT not found</div>;
  return <div>NFT: {nft.metadata.name}</div>;
}

Configuration

tokenId

The token ID of the NFT you want to fetch.

import { useContract, useNFT } from "@thirdweb-dev/react";

// The token ID of the NFT you want to fetch
const tokenId = 0;

function App() {
  const { contract } = useContract("{{contract_address}}");
  const {
    data: nft,
    isLoading,
    error,
  } = useNFT(
    contract,
    tokenId,
  );
}

Return Value

The hook's data property, once loaded, contains the following properties:

{
    metadata: {
      id: string;
      uri: string;
      name?: string | number | undefined;
      description?: string | null | undefined;
      image?: string | null | undefined;
      external_url?: string | null | undefined;
      animation_url?: string | null | undefined;
      background_color?: string | undefined;
      properties?: {
          [x: string]: unknown;
      } | {
          [x: string]: unknown;
      }[] | undefined;
  };
    owner: string;
    type: "ERC1155" | "ERC721";
    supply: number;
    quantityOwned?: number;  // Only available for ERC1155
}