Skip to main content
The useModal hook provides methods to control the Para modal’s visibility. This is useful for programmatically opening the modal for authentication or wallet management.

​
Import

import { useModal } from "@getpara/react-sdk";

​
Usage

function ModalControl() {
  const { isOpen, openModal, closeModal } = useModal();
  const { data: account } = useAccount();

  return (
    <div>
      <button onClick={() => openModal()}>
        {account?.isConnected ? "Manage Wallet" : "Connect Wallet"}
      </button>

      {isOpen && (
        <div>
          <p>Modal is currently open</p>
          <button onClick={closeModal}>Close Modal</button>
        </div>
      )}
    </div>
  );
}

​
Parameters

This hook does not accept any parameters.

​
Return Type

​
Example: Conditional Modal Control

function ConditionalModalExample() {
  const { openModal } = useModal();
  const { data: account } = useAccount();
  const { data: wallet } = useWallet();

  const handleAction = () => {
    if (!account?.isConnected) {
      // Open modal for authentication
      openModal();
    } else if (!wallet) {
      // Open modal to select/create wallet
      openModal();
    } else {
      // User is ready, perform action
      console.log("Ready to perform action with wallet:", wallet.id);
    }
  };

  return (
    <button onClick={handleAction}>
      Perform Action
    </button>
  );
}

​
Example: Dynamic Auth Identifier

Pass defaultAuthIdentifier directly to openModal to pre-populate the auth input at the moment the modal opens, without needing to set it at the provider level. 
function DynamicAuthExample() {
  const { openModal } = useModal();

  const handleLogin = (userEmail: string) => {
    // Pass the identifier when opening — no need to update ParaProvider props
    openModal({ defaultAuthIdentifier: userEmail });
  };

  return (
    <button onClick={() => handleLogin("user@example.com")}>
      Log In
    </button>
  );
}

​
Example: Auto-open on Mount

function AutoOpenModal() {
  const { openModal } = useModal();
  const { data: account } = useAccount();

  useEffect(() => {
    // Automatically open modal if user is not connected
    if (account && !account.isConnected) {
      openModal();
    }
  }, [account, openModal]);

  return <div>Welcome to our app!</div>;
}

​
Notes

  • The modal component (<ParaModal />) must be rendered within the ParaProvider for this hook to work
  • Opening the modal when a user is not connected will show the authentication flow
  • Opening the modal when a user is connected will show wallet management options
  • The modal can be closed by the user clicking outside or using the close button