thirdweb React SDK

Ultimate collection of React hooks for your web3 apps

Installation

You can install this SDK with either npm or yarn:

npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers

Starter Templates

We provide template repositories that already have the thirdweb React SDK setup and ready-to-go to help you get started with thirdweb quickly. You can find all the available starter respositories below.

• Next.js (typescript / javascript)
• Create React App (typescript / javascript)
• Vite (typescript / javascript)

Quick Start

Configure the thirdweb Provider

In order to use the hooks offered by the React SDK, you need to first setup a ThirdwebProvider for your app which lets you optionally configure your app. You can use this configuration to control what networks you want users to connect to, what types of wallets can connect to your app, and the settings for the Typescript SDK.

At the top level of your application, add a ThirdwebProvider as follows:

App.jsx

import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";

const App = () => {
  return (
    <ThirdwebProvider desiredChainId={ChainId.Mainnet}>
      <YourApp />
    </ThirdwebProvider>
  );
};

Now you'll be able to use all the hooks provided by the React SDK! Let's take a look.

Let Users Connect Wallets

Next, we'll add a button to our app which will let users connect their wallets. For now, we'll make it so that users with MetaMask wallets can connect.

ConnectMetamaskButton.jsx

import { useAddress, useDisconnect, useMetamask } from "@thirdweb-dev/react";

export const ConnectMetamaskButtonComponent = () => {
  const connectWithMetamask = useMetamask();
  const address = useAddress();
  return (
    <div>
      {address ? (
        <h4>Connected as {address}</h4>
      ) : (
        <button onClick={connectWithMetamask}>Connect Metamask Wallet</button>
      )}
    </div>
  );
};

Here, we use the useMetamask hook to handle metamask connection. When a user clicks the button, we'll call the connectWithMetamask function, which will prompt users to connect their metamask wallet.

Interact With Contracts

The thirdweb React SDK also enables you to interact directly with contracts through simple hooks!

Let's setup a simple component to interact with an NFT Collection contract and get the data of all the NFTs on the contract.

NFTList.jsx

import { useMintNFT, useNFTCollection, useNFTs } from "@thirdweb-dev/react";

const NFTListComponent = () => {
  const address = useAddress();
  const nftCollection = useNFTCollection("<NFT-COLLECTION-CONTRACT-ADDRESS>");
  const { data: nfts } = useNFTs(nftCollection);
  const { mutate: mintNFT } = useMintNFT(nftCollection);

  const mint = () => {
    mintNFT({
      to: address,
      metadata: {
        name: "Cool NFT",
        description: "Minted from react",
      },
    });
  };

  return (
    <div>
      <button onClick={mint}>Mint</button>
      <ul>
        {nfts?.map((nft) => (
          <li key={nft.metadata.id.toString()}>{nft.metadata.name}</li>
        ))}
      </ul>
    </div>
  );
};

Here, we get an NFT Collection contract instance from the TypeScript SDK. We can then use all the methods on this thirdweb contract SDK instance - here we use the mintTo method to mint an NFT on the contract, and we use useNFTList to display all the NFTs in the collection on the page.

And that's all for the setup! Just like that, you can setup a ThirdwebProvider and use all the hooks of the SDK, allowing you to let users connect wallets, interact with contracts, and more!

Advanced Configuration

The ThirdwebProvider offers a number of configuration options to control the behavior of the React and Typescript SDK.

These all the configuration options of the <ThirdwebProvider />. We provide defaults for all of these, but you customize them to suit your needs.

App.jsx

import { ChainId, IpfsStorage, ThirdwebProvider } from "@thirdweb-dev/react";

const KitchenSinkExample = () => {
  return (
    <ThirdwebProvider
      desiredChainId={ChainId.Mainnet}
      chainRpc={{ [ChainId.Mainnet]: "https://mainnet.infura.io/v3" }}
      dAppMeta={{
        name: "Example App",
        description: "This is an example app",
        isDarkMode: false,
        logoUrl: "https://example.com/logo.png",
        url: "https://example.com",
      }}
      storageInterface={new IpfsStorage("https://your.ipfs.host.com")}
      supportedChains={[ChainId.Mainnet]}
      walletConnectors={[
        "walletConnect",
        { name: "injected", options: { shimDisconnect: false } },
        {
          name: "walletLink",
          options: {
            appName: "Example App",
          },
        },
        {
          name: "magic",
          options: {
            apiKey: "your-magic-api-key",
            rpcUrls: {
              [ChainId.Mainnet]: "https://mainnet.infura.io/v3",
            },
          },
        },
      ]}
      sdkOptions={{
        gasSettings: { maxPriceInGwei: 500, speed: "fast" },
        readonlySettings: {
          chainId: ChainId.Mainnet,
          rpcUrl: "https://mainnet.infura.io/v3",
        },
        gasless: {
          openzeppelin: {
            relayerUrl: "your-relayer-url",
          },
        },
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
};