useMintNFT

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.

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

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

Usage

Provide your NFT collection contract as the argument.

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

Configuration

metadata

metadata (required)

The metadata of the NFT to mint.

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

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: {
            name: "My NFT",
            description: "This is my NFT",
            image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
          },
          to: "{{wallet_address}}",
        })
      }
    >
      Mint NFT
    </Web3Button>
  );
}

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

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.

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

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

function App() {
  const address = useAddress();
  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: address, // Use useAddress hook to get current wallet address
        })
      }
    >
      Mint NFT
    </Web3Button>
  );
}