Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.getpara.com/llms.txt

Use this file to discover all available pages before exploring further.

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

  • ParaProvider renders the modal by default, so useModal can open and close that embedded modal
  • If you render your own <ParaModal />, set config={{ disableEmbeddedModal: true }} on ParaProvider to avoid two modal instances
  • 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