Interface DialogApi

open

• open<TResult = void>(
      elementOrComponent:
          | Element
          | ((props: { dialog: DialogApiDialog<TResult> }) => Element),
  ): DialogApiDialog<TResult>

  Opens a dialog and returns a handle to it.

  Type Parameters

  • TResult = void

  Parameters

  • elementOrComponent: Element | ((props: { dialog: DialogApiDialog<TResult> }) => Element)

    The element or component to render. If a component is provided, it will be provided with a dialog prop that contains the dialog handle.

  Returns DialogApiDialog<TResult>

  Remarks

  The provided element or component is rendered as-is in the app's React tree. It is the caller's responsibility to provide all dialog chrome, such as an overlay, backdrop, and dialog surface. This makes the method agnostic to the design library used for the dialog.

  Example

  Example with inline dialog element

  const dialog = dialogApi.open<boolean>(
    <Dialog isOpen onOpenChange={isOpen => !isOpen && dialog.close()}>
      <DialogHeader>Are you sure?</DialogHeader>
      <DialogBody>This action cannot be undone.</DialogBody>
      <DialogFooter>
        <Button onPress={() => dialog.close(false)}>Cancel</Button>
        <Button onPress={() => dialog.close(true)}>Confirm</Button>
      </DialogFooter>
    </Dialog>
  );
  const result = await dialog.result();
  Copy

  Example

  Example with a dialog component

  function ConfirmDialog({ dialog }: { dialog: DialogApiDialog<boolean> }) {
    return (
      <Dialog isOpen onOpenChange={isOpen => !isOpen && dialog.close()}>
        <DialogHeader>Are you sure?</DialogHeader>
        <DialogBody>This action cannot be undone.</DialogBody>
        <DialogFooter>
          <Button onPress={() => dialog.close(false)}>Cancel</Button>
          <Button onPress={() => dialog.close(true)}>Confirm</Button>
        </DialogFooter>
      </Dialog>
    );
  }
  const result = await dialogApi.open(ConfirmDialog).result();
  Copy