Skip to main content
@thru/react-sdk is the React layer on top of the Thru browser wallet. It wraps @thru/browser-sdk, exposes a client-side provider, and gives you hooks for wallet state, account selection, and the underlying Thru RPC client.

​
Install

npm install @thru/react-sdk

​
Root export

Import everything from the package root: 
import {
  ThruProvider,
  useWallet,
  useAccounts,
  useThru,
  BrowserSDK,
  ErrorCode,
} from '@thru/react-sdk';
The package is root-export only, so there are no subpath imports to learn.

​
When to use it

Use @thru/react-sdk when you are building a React app that needs:
  • Wallet connect and disconnect flows
  • Selected-account and account-list state
  • Access to the embedded browser wallet and Thru RPC client from React components
  • A simple bridge between React UI and the lower-level browser SDK
Choose a different layer if:
  • You are not using React: use @thru/browser-sdk or @thru/embedded-provider
  • You want a prebuilt React control instead of hooks: use @thru/react-ui

​
Main exports

​
ThruProvider

ThruProvider is the context provider for the package. It takes a config prop of type BrowserSDKConfig and must run in a client component. The provider creates and owns a shared BrowserSDK instance, tracks connection state, surfaces the current accounts, and exposes the underlying Thru RPC client through context.

​
ThruProviderProps

ThruProviderProps requires children and a config value of type BrowserSDKConfig.

​
useWallet

useWallet() gives you the action-oriented API:
  • connect(options?)
  • disconnect()
  • mountInline(container)
  • selectAccount(account)
  • wallet
  • accounts
  • selectedAccount
  • isConnected
  • isConnecting
It is the best starting point when your UI needs to drive the wallet experience directly.

​
useAccounts

useAccounts() returns the current accounts, selectedAccount, isConnected, and isConnecting state. It also accepts an optional onAccountSelect callback for reacting to selection changes.
OptionDescription
onAccountSelectCalled when the selected account changes.

​
useThru

useThru() returns the raw context value if you need direct access to the wallet instance, the current accounts, the selected account, or the Thru RPC client.

​
Example

'use client';

import { ThruProvider, useWallet, useAccounts } from '@thru/react-sdk';

function WalletPanel() {
  const { connect, disconnect, isConnected, isConnecting } = useWallet();
  const { accounts, selectedAccount } = useAccounts();

  if (!isConnected) {
    return (
      <button onClick={() => connect()} disabled={isConnecting}>
        {isConnecting ? 'Connecting…' : 'Connect Thru Wallet'}
      </button>
    );
  }

  return (
    <section>
      <p>Selected account: {selectedAccount?.address}</p>
      <ul>
        {accounts.map((account) => (
          <li key={account.address}>{account.address}</li>
        ))}
      </ul>
      <button onClick={() => disconnect()}>Disconnect</button>
    </section>
  );
}

export function App() {
  return (
    <ThruProvider
      config={{
        iframeUrl: 'https://wallet.thru.org/embedded',
        rpcUrl: 'https://grpc-web.alphanet.thruput.org',
      }}
    >
      <WalletPanel />
    </ThruProvider>
  );
}
The root package also re-exports BrowserSDK, ErrorCode, ConnectOptions, SDKEvent, and the shared chain types ConnectResult, IThruChain, SignMessageParams, SignMessageResult, and WalletAccount.