📘 react-use-confirming-dialog

A simple, promise-based React confirmation dialog hook — no dependencies, fully accessible, customizable, and easy to use.

🌌 Features

• Use like native window.confirm(), but better UX and accessibility
• Promise-based: easily await the user response
• Customizable title, message, button text, and colors
• No UI dependencies — pure React + inline styles
• Renders as a modal overlay using React portal

Screenshots

🔧 Installation

npm install react-use-confirming-dialog
# or
yarn add react-use-confirming-dialog

🎲 Usage

Wrap your app with ConfirmProvider once:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ConfirmProvider } from 'react-use-confirming-dialog'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <ConfirmProvider>
    <App />
  </ConfirmProvider>
)

Then use the useConfirm hook anywhere inside your app: in this newer version you can add your preffered font to each element in the dialog as shown in the code below:

import { useConfirm } from 'react-use-confirming-dialog'

export function DeleteButton() {
  const confirm = useConfirm()

  const handleDelete = async () => {
    const ok = await confirm({
      title: "Delete file?",
      message: "Are you sure you want to delete this file? This action cannot be undone.",
      confirmText: "Delete",
      cancelText: "Cancel",
      confirmColor: "#dc2626",
      confirmTextFont: "monospace", // change with the font of your choice
      cancelTextFont: "monospace",
      dialogTextFont :"monospace"
    })


    if (ok) {
      // deletion logic + dialog closed
    } else {
      // dialog closed
    }
  }

  return <button onClick={handleDelete}>Delete File</button>
}

👾 API

| Option | Type | Default |Description | :-------- | :------- | :------------------------- |:--------| | title | string | "Confirm" |Dialog title| |message|string|Required|Confirmation message body | |confirmText|string|"OK"|Text for confirm button| |cancelText|string|"Cancel"|Text for cancel button| |confirmColor|string|#2563eb|Background color of confirm button (CSS value)|

🔮 Live Demo

• CodeSandBox

📜 License

MIT © Mohamed Khalil Hermassi

🃏 Contributing

Pull requests and issues are welcome!

👑 Badges

☕ Buy me a coffee

If you find this package helpful and want to support its development, you can buy me a coffee! Your support motivates me to keep improving and maintaining this project.