---
tags: brew-js-react
---

# `createDialog`

## Dialog content

const dialog = createDialog({
    onRender({ closeDialog }) {
        return (
            <div>
                <p>This is my content</p>
                <button type="button" onClick={() => closeDialog()}>Close</button>
            </div>
        );
    }
});
dialog.open();

## Return value

const dialog = createDialog({
    onRender: function DialogContent({ closeDialog }) {
        const ref = useRef();
        return (
            <div>
                <p>Input value:</p>
                <p><input ref={ref} type="text" /></p>
                <button type="button" onClick={() => closeDialog(ref.current.value)}>Close</button>
            </div>
        );
    }
});

// return value passed to `closeDialog`
// if the dialog is forcibly closed, undefined is returned
const returnValue = await dialog.open();

## Asynchronous action in dialog

It is common that asynchronous action, like request to server, is executed when user confirms in a prompt. In such case, the dialog will hold until operation succeed, and stay with error message when it fails.

    onCommit?: (value: T | undefined) => void;

## Dialog options

There are several flags controlling user interactions:

    preventLeave?: boolean;
    preventNavigation?: boolean;
    modal?: boolean;

Additional effects can be added in `onOpen` and `onClose` callback:

    onOpen?: (root: HTMLElement) => void;
    onClose?: (root: HTMLElement) => void;

## Wrappers

## Examples

export function createAlertDialog(props: AlertDialogProps) {
    return createDialog({
        modal: true,
        preventNavigation: props.preventNavigation,
        showCloseButton: false,
        onCommit: props.onCommit,
        onRender({ closeDialog }) {
            return (
                <DialogPromptContent title={props.title}>
                    <Button label={props.confirmText} onClick={() => closeDialog(true)} />
                </DialogPromptContent>
            );
        }
    });
}