Initializing AppKit...
;
}
if (loading) {
return Loading...
;
}
return (
Modal is {open ? 'open' : 'closed'}
Selected Network: {selectedNetworkId}
Active Chain: {activeChain}
);
}
```
## useAppKitTheme
The theming hook that controls the visual appearance of the modal. Use this hook when you need to customize the modal's colors, implement dark/light mode, or match the modal's appearance with your application's theme.
```ts theme={null}
import { useAppKitTheme } from "@reown/appkit/react";
const { themeMode, themeVariables, setThemeMode, setThemeVariables } =
useAppKitTheme();
setThemeMode("dark");
setThemeVariables({
"--apkt-color-mix": "#00BB7F",
"--apkt-color-mix-strength": 40,
});
```
### Use Cases
* Implementing dark/light mode in your dApp
* Customizing the modal's appearance to match your brand
* Creating theme-specific UI elements
* Syncing the modal's theme with your app's theme
## useAppKitEvents
Subscribes to modal, wallet, and transaction events emitted by AppKit. Useful for analytics, telemetry, custom notifications, or reacting to specific user actions.
```ts theme={null}
import { useAppKitEvents } from "@reown/appkit/react";
const events = useAppKitEvents();
```
The hook returns the latest event object. Each time a new event is emitted, the component re-renders with the new value:
```ts theme={null}
{
timestamp: number
data: {
type: 'track' | 'error'
event: string // the event name
properties?: object // event-specific payload
}
}
```
### Use Cases
* Tracking user interactions with the modal
* Implementing analytics for wallet connections
* Creating custom notifications for connection events
* Handling specific wallet events in your application
The direct wallet connection hook that enables connectivity to specific wallets without opening the modal. Use this hook when you want to provide direct wallet buttons, create a customized wallet selection interface, or implement social login options.
Using the wallet button hooks ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
This hook allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.
Execute this command to install the library for use it: