Docs

useClaimNFT

Hook for claiming an NFT from a smart contract.

Available to use on smart contracts that implement a Claimable interface, and follow either the ERC721 or ERC1155 standard.

Example

import {
  useContract,
  useClaimNFT,
  Web3Button,
} from "@thirdweb-dev/react";
 
function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutateAsync: claimNft,
    isLoading,
    error,
  } = useClaimNFT(contract);
 
  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimNft({
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
          quantity: 1,
        })
      }
    >
      Claim NFT
    </Web3Button>
  );
}

Parameters

Returns

A mutation object to claim a NFT to the wallet specified in the params

const { mutateAsync, isLoading, error } = useClaimNFT(contract);

options

The mutation function takes an object as argument with below properties:

to

The wallet address to mint the NFT(s) to.

Use the useAddress hook to get the currently connected wallet address.

quantity

The number of NFTs you wish to claim.

  • With ERC721 contracts, this represents the number of unique tokens you wish to claim.

  • With ERC1155 contracts, this represents the quantity of the specific tokenId you wish to claim.

tokenId

For ERC1155 contracts, you must specify a specific tokenId to claim.

options (optional)

Customizable ClaimOptions object to override the default behaviour of the hook.

There are three options available:

  • checkERC20Allowance - Whether to check the ERC20 allowance of the sender, defaults to true.

  • currencyAddress - The currency to pay for each token claimed, defaults to NATIVE_TOKEN_ADDRESS for native currency.

  • pricePerToken - The price to pay for each token claimed. Not relevant when using claim conditions.

import {
  useContract,
  useClaimNFT,
  Web3Button,
} from "@thirdweb-dev/react";
 
function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutate: claimNft,
    isLoading,
    error,
  } = useClaimNFT(contract);
 
  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimNft({
          to: "{{wallet_address}}",
          quantity: 1,
          options: {
            checkERC20Allowance: true,
            currencyAddress: "{{erc20_address}}",
            pricePerToken: 0,
          },
        })
      }
    >
      Claim NFT
    </Web3Button>
  );
}