Skip to main content

useContract

Hook for connecting to a smart contract.

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

Usage​

Provide your smart contract address as the first parameter.

Once connected, contract will be an instance of your smart contract.

The ABI of the smart contract is resolved automatically for contracts deployed or imported using the dashboard.

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

function App() {
  const { contract, isLoading, error } = useContract("{{contract_address}}");
}
Generate

To cache the ABI of the smart contract, use thirdweb generate.

This is recommended to improve performance and provide type-safety when interacting with your smart contract.

Configuration​

Contract Type (optional)​

If your contract is a prebuilt contract, it is strongly recommended you provide the contract's name as the second argument to gain access to improved top-level functions and type inference.

View available contract types
  • NFT Drop: "nft-drop"
  • Signature Drop: "signature-drop"
  • Edition Drop: "edition-drop"
  • NFT Collection: "nft-collection"
  • Edition: "edition"
  • Multiwrap: "multiwrap"
  • Pack: "pack"
  • Token Drop: "token-drop"
  • Token: "token"
  • Marketplace: "marketplace" | "marketplace-v3"
  • Split: "split"
  • Vote: "vote"

When a contract type is provided, the contract object will be typed as the contract's class. For example, if you provide the contract type pack, the contract object will be returned typed as an instance of the Pack class, unlocking all of the top-level functions specific to the pack.

const { contract, isLoading, error } = useContract(
  "{{contract_address}}",
  "contract-type",
);

Contract ABI (optional)​

Optionally, (if you don’t want to use the dashboard import feature), you can provide your smart contract’s ABI to the second parameter of the useContract hook. This is useful when developing on a local node, where it may be faster to use the ABI than to import the contract using the dashboard.

The ABI is only necessary if you have not deployed your contract with, or imported your contract to the thirdweb dashboard.

const { contract, isLoading, error } = useContract(
  "{{contract_address}}",
  {{contract_abi}},
);