thirdweb React SDK

A collection of 100+ React hooks and UI components for your web3 apps, for any EVM-compatible blockchain.

Connect to user’s wallets, interact with smart contracts, sign messages, and utilize common standards such as tokens, NFTs, marketplaces; all with built-in caching, RPC URLs, IPFS gateways, and more.

npx thirdweb install

Check out the getting started guide to learn how to use the SDK in less than 2 minutes.

The React SDK uses React Query under the hood to expose a collection of query and mutation hooks, each with built-in caching, query invalidation, query retries, and more.

Each hook (except for wallet/network management) wraps some functionality of the TypeScript SDK, which are made available as either a query hook to read data, or as a mutation hook to write transactions to the blockchain.

When mutations are called (when a user executes a transaction), query invalidation is automatically triggered to update the relevant queries that depend on the data that was changed. For example, when minting a new NFT, queries that view information about NFTs are re-fetched to load the new NFT automatically.

All query hooks are used to read data from the blockchain, smart contracts, a user’s wallet, etc.

Each one comes with some helpful properties to create a powerful user experience:

• data - The data returned from the query (e.g. the NFTs of a contract).
• isLoading - Whether the query is currently loading.
• error - The error returned from the query, if any.

import { useContractRead, useContract } from "@thirdweb-dev/react";
 
function App() {
  const { data: contract } = useContract("{{contract_address}}");
  const { data, isLoading, error } = useContractRead(
    contract,
    "functionName",
  );
}

Mutations are used to write data to the blockchain when a transaction is required.

They require a wallet to be connected, and by default, are executed from the currently connected wallet.

Each mutation comes with similar properties to queries:

• mutate - The function to execute the mutation (e.g. mint a new NFT).
• mutateAsync - The function to execute the mutation, but returns a promise (allowing await to be used).
• isLoading - Whether the mutation is currently executing.
• error - The error returned from the mutation, if any.

import {
  useContractWrite,
  useContract,
  Web3Button,
} from "@thirdweb-dev/react";
 
function App() {
  const { data: contract } = useContract("{{contract_address}}");
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "functionName",
  );
}

Upon execution of a mutation, the relevant queries are automatically invalidated to fetch the latest data.