useModal

Access modal props from any child component inside a modal.


import { useModal } from "react-easy-modals";
 
function MyModalContent() {
  const { close, id, isNested } = useModal();
 
  return <button onClick={() => close("result")}>Close Modal</button>;
}

Return Value

The hook returns a ModalProps object. See the Props page for all available properties.

TypeScript

You can pass a generic type to useModal to type the close function return value:


type CloseValue = "confirm" | "cancel";
 
function MyModalContent() {
  const { close } = useModal<CloseValue>();
 
  close("confirm"); // ✅ typed
  close("invalid"); // ❌ TypeScript error
}

The type cannot be inferred automatically from the parent modal. You need to specify it manually, similar to useBeforeClose.

When to Use

Use useModal when you need to access modal props from a deeply nested child component without prop drilling.

useModal must be called inside a modal component or one of its children. Calling it outside a modal will throw an error.