useWalletUiDropdown

The useWalletUiDropdown hook provides all the necessary logic and props to build a wallet dropdown component. It handles the list of wallets, connection/disconnection actions, and the underlying menu state.

This hook powers the standard WalletUiDropdown component. You can use this hook directly to build a completely custom dropdown UI.

Return Value

The hook returns an object with the following properties:

Name	Type	Description
buttonProps	BaseButtonProps	Props to be spread onto a trigger button.
connected	boolean	A boolean indicating if a wallet is connected.
dropdown	BaseDropdownControl	The underlying menu control from Zag.js, containing the state machine API.
items	BaseDropdownItem[]	An array of items to be rendered inside the dropdown menu.

Example

This example shows how to use the hook with the BaseDropdown component to create a functioning wallet dropdown.

import { useWalletUiDropdown, BaseDropdown } from '@wallet-ui/react';

function CustomWalletDropdown() {
    const { buttonProps, items, dropdown } = useWalletUiDropdown();

    return <BaseDropdown buttonProps={buttonProps} dropdown={dropdown} items={items} />;
}

Live interactive examples are omitted from this static docs site.