Create a function that renders a dialog when calling a function.

create-confirmation.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ConfirmDialog } from "./dialog";

export function renderConfirmDialog(
    title: string,
    subTitle: string,
    confirmLabel: string,
    cancelLabel: string,
): Promise<boolean> {
    const wrapper = document.body.appendChild(document.createElement("div"));
    const promise = new Promise((resolve, reject) => {
        try {
            ReactDOM.render(
                <ConfirmDialog
                    reject={reject}
                    resolve={resolve}
                    title={title}
                    subText={subTitle}
                    confirmLabel={confirmLabel}
                    cancelLabel={cancelLabel}
                />,
                wrapper,
            );
        } catch (e) {
            console.error(e);
            throw e;
        }
    });
    function dispose() {
        setTimeout(() => {
            ReactDOM.unmountComponentAtNode(wrapper);
            setTimeout(() => wrapper.remove());
        }, 1000);
    }
    return promise.then(
        () => {
            dispose();
            return true;
        },
        () => {
            dispose();
            return Promise.reject(false);
        },
    );
}

usage.tsx

renderConfirmDialog(
                "title",
                "content",
                "Yes",
                "No",
            )
                .then(() => {
                    // process yes
                })
                .catch(() => {
                    // process no
                });