A lightweight and flexible confirmation dialog component for React applications. This package provides an easy-to-use solution for handling confirmation dialogs and notifications in your React projects.

• 🎯 Simple and intuitive API
• 🎨 Customizable dialog styling
• 🔄 Multiple dialog support
• 🔔 Built-in toast notifications
• ⚡ Lightweight and performant
• 📱 Responsive design
• 🎭 Multiple dialog types (Confirm, Alert, Info)
• 🎨 CSS Custom Properties for easy theming

npm install react-confirmly # or yarn add react-confirmly

Try React Confirmly in action with our interactive demo on Stackblitz:

1. First, wrap your application with the ConfirmlyProvider:

import{ConfirmlyProvider}from'react-confirmly';functionApp(){return<ConfirmlyProvider>{/* Your app components */}</ConfirmlyProvider>;}

2. Use the confirmation dialogs in your components:

import{useConfirmly}from'react-confirmly';functionMyComponent(){const{ confirm, alert, info, notify }=useConfirmly();consthandleDelete=()=>{confirm('Are you sure you want to delete this item?',{title: 'Delete Item',onConfirm: ()=>{// Handle confirmationnotify.success('Item deleted successfully!');},onCancel: ()=>{notify.error('Deletion cancelled');},});};consthandleWarning=()=>{alert('This action cannot be undone!',{title: 'Warning',actions: [{label: 'Proceed',onClick: ()=>console.log('Proceeded')},{label: 'Cancel',onClick: ()=>console.log('Cancelled')},],});};constshowInfo=()=>{info('Your changes have been saved successfully.',{title: 'Success',showIcon: true,});};return(<div><buttononClick={handleDelete}>Delete Item</button><buttononClick={handleWarning}>Show Warning</button><buttononClick={showInfo}>Show Info</button></div>);}

You can also use Confirmly without React components by importing the confirmly object directly:

import{confirmly}from'react-confirmly';// Show confirmation dialogconfirmly.confirm('Are you sure you want to delete this item?',{title: 'Delete Item',onConfirm: ()=>{// Handle confirmationconfirmly.notify.success('Item deleted successfully!');},onCancel: ()=>{confirmly.notify.error('Deletion cancelled');},});// Show alert dialogconfirmly.alert('This action cannot be undone!',{title: 'Warning',actions: [{label: 'Proceed',onClick: ()=>console.log('Proceeded')},{label: 'Cancel',onClick: ()=>console.log('Cancelled')},],});// Show info dialogconfirmly.info('Your changes have been saved successfully.',{title: 'Success',showIcon: true,});// Show notificationsconfirmly.notify.success('Operation successful!');confirmly.notify.error('Something went wrong');// Get current modals stateconstmodals=confirmly.getModals();// Clear all modalsconfirmly.clearModals();

Note: Even when using the non-React API, you still need to wrap your application with ConfirmlyProvider at the root level.

You can customize the appearance of the dialogs by overriding the CSS custom properties in your application:

:root{/* Button Styles */--cfm-btn-bg:#d4deff; --cfm-btn-color:#0d134d; --cfm-btn-borderRadius:6px; /* Modal Styles */--cfm-modal-bg:#ffffff; --cfm-modal-borderRadius:8px; /* Header Styles */--cfm-header-fs:1.2rem; --cfm-header-color:#001f3f; --cfm-header-padding:10px16px; /* Content Styles */--cfm-content-fs:1rem; --cfm-content-color:#001f3f; --cfm-content-padding:25px16px; /* Action Buttons Styles */--cfm-actions-padding:10px16px; --cfm-actions-gap:8px; /* Backdrop Styles */--cfm-backdrop-color:rgba(10,10,10,0.53); --cfm-backdrop-blur:2px; /* Divider Styles */--cfm-divider:#dadada; /* Screen Margin */--cfm-screen-margin:30px}

The dialogs can be positioned in different locations on the screen using the position prop:

confirm('Are you sure?',{position: 'top-left'|'top-right'|'top-center'|'left'|'center'|'right'|'bottom-left'|'bottom-right'|'bottom'});

Available positions:

• top-left
• top-right
• top-center
• left
• center (default)
• right
• bottom-left
• bottom-right
• bottom

The hook provides the following methods:

• confirm(description, config) - Show a confirmation dialog
• alert(description, config) - Show an alert dialog
• info(description, config) - Show an info dialog
• notify - Show toast notifications
• modals - Current state of all modals
• clearModals() - Clear all modals

All dialog types (confirm, alert, info) accept the following configuration options:

interfaceDialogConfig{title?: string;// Dialog titleicon?: ReactNode;// Custom icon componentactions?: Array<{// Custom action buttonslabel: string;onClick: ()=>void;}>;onConfirm?: ()=>void;// Callback for confirmationonCancel?: ()=>void;// Callback for cancellationshowIcon?: boolean;// Whether to show the default icondivider?: boolean;// Show dividerdividerTop?: boolean;// Show top dividerdividerBottom?: boolean;// Show bottom dividerposition?: string;// Dialog positiondisablePortal?: boolean;// Disable portal renderingactionsAlign?: 'left'|'center'|'right';// Align action buttons}

Example usage with props:

import{ConfirmlyProvider}from'react-confirmly';functionApp(){return(<ConfirmlyProviderdisablePortal={false}dialogPosition="top-right"showIcons={true}notifyProps={{position: 'top-right',duration: 3000,style: {background: '#333',color: '#fff',},}}>{/* Your app components */}</ConfirmlyProvider>);}

The provider accepts these props to configure the global behavior of all dialogs. Individual dialog configurations can override these settings when needed.

The package includes built-in toast notifications through react-hot-toast. You can use them like this:

const{ notify }=useConfirmly();// Success notificationnotify.success('Operation successful!');// Warning notification with custom iconnotify.warning('Please review your changes');// Error notificationnotify.error('Something went wrong');// Loading notificationnotify.loading('Processing your request...');// Clear all notificationsnotify.clear();

Each notification method accepts an optional options object that can include:

• clearPrev: boolean - Whether to clear previous notifications before showing the new one
• Any other options supported by react-hot-toast

Example with options:

notify.success('Operation successful!',{clearPrev: true,duration: 3000,});

MIT © saurabhcoded