> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# onWalletTabSelected

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

### Summary

This callback will be called when a wallet tab is selected by the user.
See here how to enable wallet tabs: [here](/react/using-our-ui/design-customizations/views#configuring-wallet-list-tabs).

### Usage

As an event prop:

```TypeScript theme={"system"}
<DynamicContextProvider
  settings={{
    events: {
      onWalletTabSelected: (args) => {
        console.log('onWalletTabSelected was called', args);
      }
    }
  }}
>
 {/* ... rest of your app ... */}
</DynamicContextProvider>
```

As a hook:

```TypeScript theme={"system"}
useDynamicEvent('walletTabSelected', (args) => {
  console.log('walletTabSelected was called', args);
});
```

### Callback Argument Value

```TypeScript theme={"system"}
{
  index: number;
  tab: {
    label: {
      text?: string;
      icon?: string | ReactElement;
      key?: string;
    };
    walletsFilter?: WalletsFilter;
    recommendedWallets?: RecommendedWallet[];
  }
}
```

<Note>
  The `tab` object contains exact properties that were provided in `tabs.items`
  — see [here](/react/using-our-ui/design-customizations/views#configuring-wallet-list-tabs). Use
  the `key` property to identify each tab in this event.
</Note>