thirdwebDocs

useNFT

Defined in

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).

Example

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>;
}
function useNFT(
  contract: RequiredParam<TContract>,
  tokenId: RequiredParam<BigNumberish>,
): UseQueryResult<NFT, unknown>;

Parameters

Instance of a NFTContract

Type

let contract: RequiredParam<TContract>;

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

Type

let tokenId: RequiredParam<BigNumberish>;

Returns

let returnType: UseQueryResult<NFT, unknown>;

Query result object that includes the metadata for the given tokenId in data property