A lightweight React library that simplifies confirmation dialogs with a Promise-based API — like window.confirm(), but fully customizable.
npm install rfr-react-confirmCreate confirmation dialogs as simple as window.confirm(), but with full customization and Promise-based API.
🎯 Simple confirmation dialogs
``typescript`
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.
bash
npm install react-confirm
`$3
typescript
import React from 'react';
import { confirmable, createConfirmation, type ConfirmDialogProps } from 'react-confirm';const MyDialog = ({ show, proceed, message }: ConfirmDialogProps<{ message: string }, boolean>) => (
dialog-overlay ${show ? 'show' : 'hide'}}>
{message}
);export const confirm = createConfirmation(confirmable(MyDialog));
`$3
typescript
import { confirm } from './confirm';const handleDelete = async (): Promise => {
// 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
`Using with React Context
If your dialog needs to access React Context (themes, authentication, etc.), use the context-aware approach:
$3
Key differences from Quick Start:
typescript
// 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 (
);
}
// 3. Your dialog can now use context
const ThemedDialog = ({ show, proceed, message }: ConfirmDialogProps) => {
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.
typescript
// Option 1: Using React.FC with ConfirmDialogProps
const Confirmation1: React.FC> = (props) => ();// Option 2: Using ConfirmDialog type
const Confirmation2: ConfirmDialog = (props) => ();
`
React Version Compatibility
- React 18+: Use
version 0.2.x or 0.3.x
- React ≤17: Use react-confirm` version 0.1.x- Simple Example - Complete TypeScript implementation.
- Context Example - Using React Context with themes and providers
Source code for these examples can be found in the react-confirm-sample repository, which also contains some archived older implementations.