Rainbow logo
RainbowKit
0.8.1

Advanced

Modal Hooks

Programmatically open modals via Hooks

The following Hooks are provided to allow the programmatic opening of modals anywhere in your application.

  • useConnectModal
  • useAccountModal
  • useChainModal

Each of these Hooks returns an object with a function for opening its respective modal. Note that the returned functions will be undefined if your application is not in the required state for the modal to be open.

import { useConnectModal, useAccountModal, useChainModal, } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
const { openConnectModal } = useConnectModal();
const { openAccountModal } = useAccountModal();
const { openChainModal } = useChainModal();
return (
<>
{openConnectModal && (
<button onClick={openConnectModal} type="button">
Open Connect Modal
</button>
)}
{openAccountModal && (
<button onClick={openAccountModal} type="button">
Open Account Modal
</button>
)}
{openChainModal && (
<button onClick={openChainModal} type="button">
Open Chain Modal
</button>
)}
</>
);
};