react-confirmly

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.

Features

• 🎯 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

Installation

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

Live Demo

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

Demo Preview

Usage

1. First, wrap your application with the ConfirmlyProvider:

import { ConfirmlyProvider } from 'react-confirmly';

function App() {
  return <ConfirmlyProvider>{/* Your app components */}</ConfirmlyProvider>;
}

2. Use the confirmation dialogs in your components:

import { useConfirmly } from 'react-confirmly';

function MyComponent() {
  const { confirm, alert, info, notify } = useConfirmly();

  const handleDelete = () => {
    confirm('Are you sure you want to delete this item?', {
      title: 'Delete Item',
      onConfirm: () => {
        // Handle confirmation
        notify.success('Item deleted successfully!');
      },
      onCancel: () => {
        notify.error('Deletion cancelled');
      },
    });
  };

  const handleWarning = () => {
    alert('This action cannot be undone!', {
      title: 'Warning',
      actions: [
        { label: 'Proceed', onClick: () => console.log('Proceeded') },
        { label: 'Cancel', onClick: () => console.log('Cancelled') },
      ],
    });
  };

  const showInfo = () => {
    info('Your changes have been saved successfully.', {
      title: 'Success',
      showIcon: true,
    });
  };

  return (
    <div>
      <button onClick={handleDelete}>Delete Item</button>
      <button onClick={handleWarning}>Show Warning</button>
      <button onClick={showInfo}>Show Info</button>
    </div>
  );
}

Usage Without React Components

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

import { confirmly } from 'react-confirmly';

// Show confirmation dialog
confirmly.confirm('Are you sure you want to delete this item?', {
  title: 'Delete Item',
  onConfirm: () => {
    // Handle confirmation
    confirmly.notify.success('Item deleted successfully!');
  },
  onCancel: () => {
    confirmly.notify.error('Deletion cancelled');
  },
});

// Show alert dialog
confirmly.alert('This action cannot be undone!', {
  title: 'Warning',
  actions: [
    { label: 'Proceed', onClick: () => console.log('Proceeded') },
    { label: 'Cancel', onClick: () => console.log('Cancelled') },
  ],
});

// Show info dialog
confirmly.info('Your changes have been saved successfully.', {
  title: 'Success',
  showIcon: true,
});

// Show notifications
confirmly.notify.success('Operation successful!');
confirmly.notify.error('Something went wrong');

// Get current modals state
const modals = confirmly.getModals();

// Clear all modals
confirmly.clearModals();

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

Customization

CSS Custom Properties

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: 10px 16px;

  /* Content Styles */
  --cfm-content-fs: 1rem;
  --cfm-content-color: #001f3f;
  --cfm-content-padding: 25px 16px;

  /* Action Buttons Styles */
  --cfm-actions-padding: 10px 16px;
  --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;
}

Dialog Positioning

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

API

useConfirmly Hook

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

Dialog Configuration

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

interface DialogConfig {
  title?: string; // Dialog title
  icon?: ReactNode; // Custom icon component
  actions?: Array<{
    // Custom action buttons
    label: string;
    onClick: () => void;
  }>;
  onConfirm?: () => void; // Callback for confirmation
  onCancel?: () => void; // Callback for cancellation
  showIcon?: boolean; // Whether to show the default icon
  divider?: boolean; // Show divider
  dividerTop?: boolean; // Show top divider
  dividerBottom?: boolean; // Show bottom divider
  position?: string; // Dialog position
  disablePortal?: boolean; // Disable portal rendering
  actionsAlign?: 'left' | 'center' | 'right'; // Align action buttons
}

ConfirmlyProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Child components to wrap | | notifyProps | ToasterProps | {} | Props to pass to the toast notification component. See react-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';

function App() {
  return (
    <ConfirmlyProvider
      disablePortal={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.

Toast Notifications

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

const { notify } = useConfirmly();

// Success notification
notify.success('Operation successful!');

// Warning notification with custom icon
notify.warning('Please review your changes');

// Error notification
notify.error('Something went wrong');

// Loading notification
notify.loading('Processing your request...');

// Clear all notifications
notify.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,
});

License

MIT © saurabhcoded