Skip to main content
@thru/react-ui exports a single React component: ThruAccountSwitcher.

​
Install

npm install @thru/react-ui @thru/react-sdk

​
When to use it

Use @thru/react-ui when you want a ready-made wallet control in a React app instead of building your own account menu or connect affordance. Choose a different layer if:
  • You want the wallet state and hooks that power the UI: use @thru/react-sdk
  • You want direct iframe control without React: use @thru/browser-sdk or @thru/embedded-provider

​
What it needs

ThruAccountSwitcher depends on the Thru React provider context from @thru/react-sdk, so it should be rendered inside ThruProvider. It also assumes your app already has the iframe and RPC settings needed by ThruProvider.

​
Props

ThruAccountSwitcher does not currently take any public props. 
import { ThruProvider } from '@thru/react-sdk';
import { ThruAccountSwitcher } from '@thru/react-ui';

export function App() {
  return (
    <ThruProvider
      config={{
        iframeUrl: 'https://wallet.thru.org/embedded',
        rpcUrl: 'https://grpc-web.alphanet.thruput.org',
      }}
    >
      <ThruAccountSwitcher />
    </ThruProvider>
  );
}

​
What it does

ThruAccountSwitcher uses useWallet() and useAccounts() from @thru/react-sdk to:
  • Connect the wallet when the user clicks the control
  • Show the selected account address when connected
  • Open a dropdown of connected accounts
  • Update the active account selection

​
Public surface

  • ThruAccountSwitcher