useLazyMint

Hook for minting a new NFT on a smart contract using the LazyMint API.

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

Usage

Provide your NFT collection contract as the argument.

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

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

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

  if (error) {
    console.error("failed to lazy mint", error);
  }

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        lazyMint({
          metadatas: [
            {
              name: "My NFT",
              description: "This is my NFT",
              image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
            },
            // You can mint multiple NFTs at once
            {
              name: "Another NFT",
              description: "This is another NFT",
              image: "ipfs://example.com/another-nft.png", // Accepts any URL or File type
            },
          ],
        })
      }
    >
      Mint NFT
    </Web3Button>
  );
}

Configuration

metadatas

By default, your metadatas 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 point to a valid JSON array containing standard metadata properties.

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

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

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

  if (error) {
    console.error("failed to lazy mint", error);
  }

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