magicModal

magicModal is the global imperative API. Its methods target the MagicModalPortal mounted in the active React tree.

show

show<T>(
  component: React.FC,
  config?: Partial<ModalProps>,
): {
  promise: Promise<HideReturn<T>>;
  modalID: string;
  update: (component: React.FC) => void;
}

Pushes a modal to the top of the stack.

const { modalID, promise, update } = magicModal.show<Profile>(
  () => <ProfilePicker />,
  {
    backdropColor: "rgba(7, 6, 18, 0.72)",
    swipeDirection: "down",
  },
);

Return	Purpose
`promise`	Resolves once when this modal closes.
`modalID`	Addresses this exact entry from outside its component.
`update`	Replaces its content without moving or resolving it.

See hide results for promise narrowing and update open content for remount behavior.

hide

hide<T>(data: T, options?: { modalID?: string }): void

Closes one modal imperatively and resolves its promise with an intentional result.

const { modalID } = magicModal.show(() => <UploadModal />);

magicModal.hide({ uploaded: true }, { modalID });

Prefer useMagicModal inside modal content. Calling hide without a modalID falls back to the top entry for compatibility and is deprecated.

hideAll

hideAll(): void

Closes every entry with MagicModalHideReason.GLOBAL_HIDE_ALL. Useful for logout boundaries and test cleanup; individual hides are clearer during normal interaction flows.

enableFullWindowOverlay

enableFullWindowOverlay(): void

Enables rendering above native iOS modal screens. This is the default and is a no-op outside iOS.

disableFullWindowOverlay

disableFullWindowOverlay(): void

Disables rendering above native iOS modal screens. See native iOS overlays for a safe try/finally pattern.