App.tsx

import React, { FC } from "react"
import { ConfirmationDialogs, confirmDialog } from "./ConfirmationDialogs"

export type AppProps = {}

export const App: FC<AppProps> = (props) => {
  const deleteWithConfirmation = async () => {
    const confirmation = await confirmDialog({
      title: () => "Are you sure?",
    })

    if (confirmation) {
      console.log("confirmed")
    } else {
      console.log("rejected")
    }
  }

  const deleteWithConfirmation2 = async () => {
    const confirmation = await confirmDialog({
      title: () => "Are you sure? 123",
    })

    if (confirmation) {
      console.log("confirmed")
    } else {
      console.log("rejected")
    }
  }

  return (
    <div className="app">
      <ConfirmationDialogs/>
      <br/><br/><br/>
      <button onClick={() => {
        deleteWithConfirmation()
        deleteWithConfirmation2()
      }}>delete
      </button>
    </div>
  )
}

ConfirmationDialog.tsx

import React, { FC, ReactNode, useEffect, useState } from "react"

type Dialog = {
  title: () => ReactNode | ReactNode[] | string
  onConfirm?: () => void
  onReject?: () => void
}

class Dialogs {
  instances: Dialog[] = []
  tick: () => void = () => null
}

export const dialogs = new Dialogs()

export const confirmDialog = (options: Dialog): Promise<boolean> => {
  return new Promise((resolve) => {
    const createDialog = () => {
      const removeDialog = () => {
        dialogs.instances = dialogs.instances.filter(instance => dialog !== instance)
        dialogs.tick()
      }
      const onConfirm = () => {
        removeDialog()
        return resolve(true)
      }
      const onReject = () => {
        removeDialog()
        return resolve(false)
      }

      const dialog = { ...options, onConfirm, onReject }

      dialogs.instances.push(dialog)
      dialogs.tick()
    }

    createDialog()
  })
}


export type ConfirmationDialogsProps = {}

export const ConfirmationDialogs: FC<ConfirmationDialogsProps> = (props) => {
  const [count, setCount] = useState(0)

  dialogs.tick = () => setCount(dialogs.instances.length)

  const dialog = [...dialogs.instances].pop()

  if ( ! dialog) {
    return null
  }

  return (
    <div className="confirmation-dialogs">
      <div>
        <h1>{dialog.title()}</h1>

        <hr/>

        <button onClick={() => dialog.onConfirm!()}>confirm</button>
        <button onClick={() => dialog.onReject!()}>reject</button>
      </div>
    </div>
  )
}