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. The information about the NFT will be returned in the data field.

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

Demo Playground

Edit the code below to see how the hook works and what data is returned.

Note: Playground uses the Goerli test network.

function App() {
  // The token ID of the NFT you want to fetch
  const tokenId = 0;

  const { contract } = useContract("0x4935154046C2f281AcE726018149F1a25449910d");
  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 style={{display:'flex', flexDirection:'column'}}>
    <strong>{nft.metadata.name}</strong>
    <img src={nft.metadata.image}/>
  </div>;
}

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;
      attributes?: {
          [x: string]: unknown;
      } | {
          [x: string]: unknown;
      }[] | undefined;
  };
    owner: string;
    type: "ERC1155" | "ERC721";
    supply: number;
    quantityOwned?: number;
}