useNFTs

Hook to query all NFTs associated with 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).

By default, only returns the first 100 NFTs in the collection. You can use the queryParams argument to filter the NFTs that are returned or to paginate through the collection.

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

Usage

Provide your NFT collection contract from the useContract hook as an argument to the hook.

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error } = useNFTs(contract);
}

Configuration

queryParams (optional)

By default, the hook will return the first 100 NFTs associated with the contract.

You can use the queryParams argument to paginate the NFTs that are returned.

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

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error } = useNFTs(
    contract,
    {
      // For example, to only return the first 50 NFTs in the collection
      count: 50,
      start: 0,
    },
  );
}

Return Value

The hook's data property, once loaded, contains an array of NFT objects, each containing 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
}[];