Each call opens a dialog and returns a Promise of the answer. Press a button to see what it returns.

InstallCopy Anchor Link

npm install react-confirm-alert

Import the CSS once, in your root layout. The path needs 3.1.1 or later.

import 'react-confirm-alert/style.css'

Ask and waitCopy Anchor Link

confirm() resolves true from the confirm button. Cancel, Escape, a click outside and closeAll() resolve false.

import { confirm } from 'react-confirm-alert'

async function onDelete() {
  const ok = await confirm({
    title: 'Delete “Q3 report.pdf”?',
    tone: 'danger',
  })
  if (ok) await moveToTrash('Q3 report.pdf')
}

Dialogs that read your providersCopy Anchor Link

Place <DialogHost /> once, inside your providers. Every dialog then renders there and reads your context, such as Redux, Intl or a theme.

<IntlProvider locale="th">
  {children}
  <DialogHost />
</IntlProvider>

The Next.js recipe adds dismissKey, so dialogs close on navigation.

NextCopy Anchor Link

• API has every export with a live example.
• Custom UI puts your own form in a dialog.
• Styling changes colours, corners and size.
• What's new lists what 3.1 to 3.3 add. Code written for 3.0 keeps working.
• The playground has every option.