useContractRead

Generic hook for reading any data from a smart contract via it’s function/view/variable name.

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

Usage

Provide your smart contract instance from useContract and a function name as the arguments.

For example, to read the value of a view on your smart contract called getName you would do the following:

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

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

function App() {
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error } = useContractRead(contract, "getName");
}

Configuration

Function Name

The function name you provide should be the name of the function in your smart contract.

This can be any function, view, variable, etc. that does not require a transaction to occur.

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

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

function App() {
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error } = useContractRead(
    contract,
    "myContractFunction",
  );
}

Arguments

If your function requires arguments, pass them as additional arguments to the hook.

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

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

function App() {
  const { contract } = useContract(contractAddress);

  // Read contract with arguments
  const { data, isLoading, error } = useContractRead(
    contract,
    "getName",
    "arg1",
    "arg2",
  );

  if (error) {
    console.error("failed to read contract", error);
  }

  return (
    <div>{isLoading ? <p>Loading...</p> : <p>Contract Name: {data}</p>}</div>
  );
}

Call Overrides (optional)

If you provide an additional argument to the hook, it will be used as the CallOverrides object send with your request.

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

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

function App() {
  const { contract } = useContract(contractAddress);

  // Read contract with arguments
  const { data, isLoading, error } = useContractRead(
    contract,
    "getName",
    // function arguments
    "arg1",
    "arg2",
    // Final argument is the call overrides
    {
      blockTag: 123,
      from: "0x123",
    },
  );

  if (error) {
    console.error("failed to read contract", error);
  }

  return (
    <div>{isLoading ? <p>Loading...</p> : <p>Contract Name: {data}</p>}</div>
  );
}