- Notifications
You must be signed in to change notification settings - Fork0
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.
License
saurabhcoded/react-confirmly
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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# oryarn add react-confirmlyTry React Confirmly in action with our interactive demo on Stackblitz:
- First, wrap your application with the
ConfirmlyProvider:
import{ConfirmlyProvider}from'react-confirmly';functionApp(){return<ConfirmlyProvider>{/* Your app components */}</ConfirmlyProvider>;}
- 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 theconfirmly 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 withConfirmlyProvider 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 theposition prop:
confirm('Are you sure?',{position:'top-left'|'top-right'|'top-center'|'left'|'center'|'right'|'bottom-left'|'bottom-right'|'bottom'});
Available positions:
top-lefttop-righttop-centerleftcenter(default)rightbottom-leftbottom-rightbottom
The hook provides the following methods:
confirm(description, config)- Show a confirmation dialogalert(description, config)- Show an alert dialoginfo(description, config)- Show an info dialognotify- Show toast notificationsmodals- Current state of all modalsclearModals()- 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}
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Child components to wrap |
notifyProps | ToasterProps | {} | Props to pass to the toast notification component. Seereact-hot-toast options |
disablePortal | boolean | false | Whether to disable portal rendering for dialogs |
dialogPosition | 'top-left' | 'top-right' | 'top-center' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'center' | Default position for all dialogs |
showIcons | boolean | true | Whether to show icons in dialogs by default |
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 throughreact-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
About
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.
Topics
Resources
License
Contributing
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.