Read contract state

Read onchain data from any contract on any chain.

Try out the demo for yourself in the reading contract state playground

Reading contract state in react is done via the useReadContract hook. The hook returns a React Query data, isLoading, and other useful state that you can use to render your component.

import { getContract } from "thirdweb";
import { useReadContract } from "thirdweb/react";
 
const contract = getContract({
  client,
  chain,
  address: "0x...",
});
 
const MyComponent = () => {
  const { data, isLoading } = useReadContract({
    contract,
    method: "function tokenURI(uint256 tokenId) returns (string)",
    params: [1n],
  });
};

Extensions are a way to make complex queries from a contract in a type-safe way with a simple API.

import { getContract } from "thirdweb";
import { useReadContract } from "thirdweb/react";
import { getOwnedNFTs } from "thirdweb/extensions/erc721";
 
const contract = getContract({
  client,
  chain,
  address: "0x...",
});
 
const MyComponent = () => {
  const ownedNFTs = useReadContract(getOwnedNFTs, {
    contract,
    address: "0x...",
  });
};

Check out all the available extensions for more details.

Query and listen to contract events with the useContractEvents hook.

import { useContractEvents } from "thirdweb/react";
import { prepareEvent } from "thirdweb";
 
const myEvent = prepareEvent({
  signature: "event MyEvent(uint256 myArg)",
});
 
const { data: events } = useContractEvents({
  contract,
  eventName: [myEvent],
});

or with extensions:

import { useContractEvents } from "thirdweb/react";
import { tokensClaimedEvent } from "thirdweb/extensions/erc721";
 
const { data: events } = useContractEvents({
  contract,
  events: [tokensClaimedEvent()],
});

Check out the contract hooks reference for more details.