Docs

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.

React SDK

React SDK is open-source. You can view the source code and contribute to it on GitHub

Installation

npx thirdweb install

Get Started

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

Get started with the React SDK

How It Works

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.

Queries

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

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.