Docs

useMintNFT

Defined in react-core/src/evm/hooks/async/nft.ts#L586

Hook for minting a new NFT on a smart contract.

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

By default, the process uploads and pins the NFT metadata to IPFS before minting.

Example

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

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync: mintNft, isLoading, error } = useMintNFT(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mintNft({
          metadata: {
            name: "My NFT",
            description: "This is my NFT",
            image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
          },
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
        })
      }
    >
      Mint NFT
    </Web3Button>
  );
}

Parameters

Returns

Mutation object that to mint a new NFT token to the connected wallet

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

options

The mutation function takes an object with the following properties:

metadata

The metadata of the NFT to mint.

By default, the metadata object is uploaded and pinned to IPFS before minting.

You can override this behavior by providing a string to the metadata property. The string must be a URL that points to a valid JSON object containing standard metadata properties

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

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

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync: mintNft, isLoading, error } = useMintNFT(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mintNft({
          // Any valid IPFS or HTTP URL that points to a JSON object
          metadata: "https://<url>/<to>/<your>/<metadata>.json",
          to: "{{wallet_address}}",
        })
      }
    >
      Mint NFT
    </Web3Button>
  );
}

to (required)

The wallet address to mint the NFT to.

Likely, you will want to mint the NFT to the currently connected wallet address. Use the useAddress hook to get this value.