Connect React SDK

ThirdwebProvider

The ThirdwebProvider is component is a provider component that sets up the React Query client.

Example


import { ThirdwebProvider } from "thirdweb/react";
 
function Example() {
  return (
    <ThirdwebProvider>
      <App />
    </ThirdwebProvider>
  );
}


function ThirdwebProvider(
  props: PropsWithChildren<{
    connectionManager?: {
      activeAccountStore: Store<undefined | Account>;
      activeWalletChainStore: Store<
        undefined | Readonly<ChainOptions & { rpc: string }>
      >;
      activeWalletConnectionStatusStore: Store<ConnectionStatus>;
      activeWalletStore: Store<undefined | Wallet>;
      addConnectedWallet: (wallet: Wallet) => void;
      connect: (
        wallet: Wallet,
        options?: ConnectManagerOptions,
      ) => Promise<Wallet>;
      connectedWallets: ReadonlyStore<Array<Wallet>>;
      defineChains: (
        chains: Array<Readonly<ChainOptions & { rpc: string }>>,
      ) => void;
      disconnectWallet: (wallet: Wallet) => void;
      handleConnection: (
        wallet: Wallet,
        options?: ConnectManagerOptions,
      ) => Promise<Wallet>;
      isAutoConnecting: Store<boolean>;
      removeConnectedWallet: (wallet: Wallet) => void;
      setActiveWallet: (activeWallet: Wallet) => Promise<void>;
      switchActiveWalletChain: (chain: Readonly) => Promise<void>;
    };
  }>,
): Element;

Parameters

The props for the ThirdwebProvider

Type


let props: PropsWithChildren<{
  connectionManager?: {
    activeAccountStore: Store<undefined | Account>;
    activeWalletChainStore: Store<
      undefined | Readonly<ChainOptions & { rpc: string }>
    >;
    activeWalletConnectionStatusStore: Store<ConnectionStatus>;
    activeWalletStore: Store<undefined | Wallet>;
    addConnectedWallet: (wallet: Wallet) => void;
    connect: (
      wallet: Wallet,
      options?: ConnectManagerOptions,
    ) => Promise<Wallet>;
    connectedWallets: ReadonlyStore<Array<Wallet>>;
    defineChains: (
      chains: Array<Readonly<ChainOptions & { rpc: string }>>,
    ) => void;
    disconnectWallet: (wallet: Wallet) => void;
    handleConnection: (
      wallet: Wallet,
      options?: ConnectManagerOptions,
    ) => Promise<Wallet>;
    isAutoConnecting: Store<boolean>;
    removeConnectedWallet: (wallet: Wallet) => void;
    setActiveWallet: (activeWallet: Wallet) => Promise<void>;
    switchActiveWalletChain: (chain: Readonly) => Promise<void>;
  };
}>;

Returns


let returnType: Element;