useContractEvents

Hook for subscribing to and querying events emitted by a Contract.

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

Usage

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

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

function App() {
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error, isError } = useContractEvents(
    contract,
    "MyEvent"
  );

  if (error) {
    console.error("failed to subscribe to events", error);
  }

  return (
    <div>
      <Web3Button
        contractAddress={contractAddress}
        action={() => {
          // Perform action that emits MyEvent
        }}
      >
        Trigger Event
      </Web3Button>

      {!isLoading && data.length > 0 && (
        <div>
          <h3>Events</h3>
          {data.map((event, index) => (
            <ul key={index}>
              <li>name: {event.eventName}</li>
              <li>data: {JSON.stringify(event.data)}</li>
            </ul>
          ))}
        </div>
      )}
    </div>
  );
}

Options

queryFilter

An object containing options to filter the events being queried.

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

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

function App() {
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error, isError } = useContractEvents(
    contract,
    "MyEvent",
    {
      queryFilter: {
        fromBlock: 0,
        toBlock: "latest",
      },
    }
  );

  if (error) {
    console.error("failed to subscribe to events", error);
  }

  return (
    <div>
      <Web3Button
        contractAddress={contractAddress}
        action={() => {
          // Perform action that emits MyEvent
        }}
      >
        Trigger Event
      </Web3Button>

      {!isLoading && data.length > 0 && (
        <div>
          <h3>Events</h3>
          {data.map((event, index) => (
            <ul key={index}>
              <li>name: {event.eventName}</li>
              <li>data: {JSON.stringify(event.data)}</li>
            </ul>
          ))}
        </div>
      )}
    </div>
  );
}

The queryFilter object accepts the following properties:

fromBlock

The block (inclusive) from which to start querying for events.

The valid values for fromBlock are:

• A string representing a block number (e.g. "10")
• A number representing a block number (e.g. 10)
• A string representing a block hash (e.g. "0x1234...")

The default value is 0 (the beginning of the blockchain).

toBlock

The block (inclusive) at which to stop querying for events.

The valid values for toBlock are:

• A string representing a block number (e.g. "10")
• A number representing a block number (e.g. 10)
• A string representing a block hash (e.g. "0x1234...")
• The special value "latest"

The default value is "latest" (the current head of the blockchain).

order

The order in which to query for events.

The valid values for order are:

• "asc"
• "desc"

The default value is "asc".

filters

An object containing filters to apply to the query.

The filters object is specific to the smart contract and event being queried. Refer to the documentation for your contract for more information.

subscribe

A boolean indicating whether or not to subscribe to future events.

When subscribe is true, the hook will continue to listen for new events and update the data property.

When subscribe is false, the hook will only query for existing events and will not listen for new events.

The default value is true.