react-confirm

react-confirm

Create confirmation dialogs as simple as window.confirm(), but with full customization and Promise-based API.

What you can do

🎯 Simple confirmation dialogs

const result = await confirm({ message: 'Delete this item?' });
if (result) {
  // User confirmed
}

🎨 Fully customizable UI - No built-in styling. Use your own components, UI libraries, or design system.

⚡ Promise-based API - Works seamlessly with async/await, no complex state management needed.

🔄 React Context support - Access your app's context, themes, and providers from within dialogs.

📦 Lightweight - No dependencies, small bundle size.

Demo

Quick Start

1. Install

npm install react-confirm

2. Create your dialog and confirmation function

import React from 'react';
import { confirmable, createConfirmation, type ConfirmDialogProps } from 'react-confirm';

const MyDialog = ({ show, proceed, message }: ConfirmDialogProps<{ message: string }, boolean>) => (
  <div className={`dialog-overlay ${show ? 'show' : 'hide'}`}>
    <div className="dialog">
      <p>{message}</p>
      <button onClick={() => proceed(true)}>Yes</button>
      <button onClick={() => proceed(false)}>No</button>
    </div>
  </div>
);

export const confirm = createConfirmation(confirmable(MyDialog));

3. Use it!

import { confirm } from './confirm';

const handleDelete = async (): Promise<void> => {
  // Fully type-safe: message is required, result is boolean
  const result = await confirm({ 
    message: 'Are you sure you want to delete this item?' 
  });
  
  if (result) {
    // User confirmed - proceed with deletion
    deleteItem();
  }
};

// In your component
<button onClick={handleDelete}>Delete Item</button>

Using with React Context

If your dialog needs to access React Context (themes, authentication, etc.), use the context-aware approach:

Simple Context Usage

Key differences from Quick Start:

// 1. Import ContextAwareConfirmation instead of createConfirmation
import { confirmable, ContextAwareConfirmation, type ConfirmDialogProps } from 'react-confirm';

// 2. Add ConfirmationRoot to your app
function App(): JSX.Element {
  return (
    <ThemeProvider>
      <div>
        <ContextAwareConfirmation.ConfirmationRoot />
        <YourAppContent />
      </div>
    </ThemeProvider>
  );
}

// 3. Your dialog can now use context
const ThemedDialog = ({ show, proceed, message }: ConfirmDialogProps<Props, boolean>) => {
  const theme = useContext(ThemeContext); // ✅ Context works!
  // ... rest of dialog implementation
};

// 4. Use ContextAwareConfirmation.createConfirmation
const confirm = ContextAwareConfirmation.createConfirmation(confirmable(ThemedDialog));

TypeScript Support

TypeScript automatically infers types from your dialog's Props definition, making the confirmation function fully type-safe.

// Option 1: Using React.FC with ConfirmDialogProps
const Confirmation1: React.FC<ConfirmDialogProps<Props, Response>> = (props) => (<Dialog />);

// Option 2: Using ConfirmDialog type
const Confirmation2: ConfirmDialog<Props, Response> = (props) => (<Dialog />);

React Version Compatibility

• React 18+: Use react-confirm version 0.2.x or 0.3.x
• React ≤17: Use react-confirm version 0.1.x

More Examples

• TypeScript Example
• Context Example
• Bootstrap Example
• Chakra UI Example

For additional reference examples, you can also check the react-confirm-sample repository, which contains archived historical examples and some alternative implementations. Check the examples above first for the latest patterns.