Skip to main content


thirdweb logo

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.

Open Source

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

Installation​

npm i @thirdweb-dev/react @thirdweb-dev/sdk ethers@^5
Starter Kits • Templates • GitHub

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.

Full Reference​

React SDK