React Confirmy

A beautiful, customizable, and accessible confirmation dialog component for React applications with built-in support for Tailwind CSS and Bootstrap.

⚠️ Important Version Notice

Version 2.0.0 introduces significant improvements and breaking changes. We strongly recommend upgrading to version 2.0.0 as version 1.x.x will no longer receive updates or support.

Why Upgrade?

• Improved styling system with better customization
• Enhanced dark mode support
• Better TypeScript support
• New features including custom icons and form fields
• Improved positioning system
• Better framework compatibility (Tailwind, etc.)

Features

• 🎨 Beautiful, modern design with dark mode support
• 🎯 Fully typed with TypeScript
• 🎭 Multiple themes (Tailwind CSS and Bootstrap)
• 📱 Responsive and mobile-friendly
• 🎪 Smart positioning with Popper.js
• ⌨️ Keyboard accessible with focus trap
• 🎨 Highly customizable styles and animations
• 🔧 Framework agnostic styling system
• 🌙 Dark mode support
• 📏 Multiple size variants (sm, md, lg)
• 🎯 Custom positioning (top, bottom, left, right)
• 🖼️ Built-in SVG icons with custom icon support
• ✨ Multiple animation types (fade, scale, slide)
• 📝 Form support with validation
• ⏳ Async operations with loading states
• 🔄 Dialog queuing system
• 📦 Nested dialogs support
• 🎯 Smart positioning with arrow indicators
• 🔒 TypeScript strict mode support
• 🎨 Custom animation keyframes support
• 🌐 Framework-agnostic option

Installation

npm install react-confirmy

Quick Start

import { useRef } from 'react';
import { Confirmy, DialogProvider } from 'react-confirmy';

function App() {
  const buttonRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DialogProvider>
      <button ref={buttonRef} onClick={() => setIsOpen(true)}>
        Delete Item
      </button>

      <Confirmy
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => {
          // Handle confirmation
          console.log('Confirmed!');
        }}
        triggerRef={buttonRef}
        type="danger"
        title="Delete Item"
        message="Are you sure you want to delete this item? This action cannot be undone."
      />
    </DialogProvider>
  );
}

Dependencies

Core Dependencies

• react (^18.0.0): Core React library
• react-dom (^18.0.0): React DOM rendering
• @popperjs/core (^2.11.8): Handles positioning of the dialog

Framework Support

The library supports multiple CSS frameworks out of the box:

• Tailwind CSS (default)
• Bootstrap
• Framework-agnostic option ('none')

Select your preferred framework using the framework prop:

<Confirmy framework="tailwind" /> // or "bootstrap" or "none"

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | required | Controls the visibility of the dialog | | onClose | () => void | required | Function called when the dialog should close | | onConfirm | (formData?: Record<string, any>) => void | Promise | required | Function called when the user confirms the action | | triggerRef | React.RefObject | required | Reference to the trigger element | | title | string | 'Confirm Action' | Dialog title | | message | string | 'Are you sure you want to proceed?' | Dialog message | | confirmText | string | 'Confirm' | Text for the confirm button | | cancelText | string | 'Cancel' | Text for the cancel button | | type | DialogType | 'warning' | Sets the dialog type ('danger' | 'warning' | 'info') | | size | DialogSize | 'md' | Controls the dialog size ('sm' | 'md' | 'lg') | | position | DialogPosition | 'top' | Sets the dialog position ('top' | 'bottom' | 'left' | 'right') | | framework | DialogFramework | 'tailwind' | CSS framework to use ('tailwind' | 'bootstrap' | 'none') | | styles | Partial | {} | Custom styles override | | className | string | '' | Additional CSS classes | | darkMode | boolean | false | Enables dark mode | | customIcon | React.ComponentType | undefined | Custom icon component | | animation | DialogAnimationConfig | { type: 'scale', duration: 200, timing: 'ease-out' } | Animation configuration | | zIndex | number | 50 | Sets the z-index of the dialog | | formFields | DialogFormField[] | [] | Form fields configuration | | asyncOptions | DialogAsyncOptions | undefined | Async operation configuration | | stackOrder | number | 0 | Order in the dialog stack | | nested | boolean | false | Whether this is a nested dialog | | parentId | string | undefined | ID of the parent dialog |

Advanced Features

Animations

Configure custom animations with the animation prop:

<Confirmy
  animation={{
    type: 'fade', // 'fade' | 'scale' | 'slide' | 'none'
    duration: 200,
    timing: 'ease-out',
    customKeyframes: '' // Optional custom animation
  }}
  // ... other props
/>

Form Support

Add form fields to your dialog with validation:

const formFields = [
  {
    type: 'text',
    name: 'username',
    label: 'Username',
    required: true,
    placeholder: 'Enter username',
    validation: (value) => 
      value.length < 3 ? 'Username must be at least 3 characters' : undefined
  },
  {
    type: 'select',
    name: 'role',
    label: 'Role',
    options: [
      { label: 'Admin', value: 'admin' },
      { label: 'User', value: 'user' }
    ]
  },
  {
    type: 'checkbox',
    name: 'terms',
    label: 'Accept Terms',
    required: true
  }
];

<Confirmy
  formFields={formFields}
  onConfirm={(data) => {
    console.log('Form data:', data);
  }}
  // ... other props
/>

Async Operations

Handle async operations with loading and status states:

<Confirmy
  onConfirm={async () => {
    await someAsyncOperation();
  }}
  asyncOptions={{
    loadingText: 'Processing...',
    successText: 'Success!',
    errorText: 'Error occurred',
    showLoadingSpinner: true
  }}
  // ... other props
/>

Custom Icons

Use your own icons or the built-in SVG icons:

// Using built-in icons (default)
<Confirmy type="warning" />

// Using custom icon
const CustomIcon = ({ width = 24, height = 24, color = 'currentColor' }) => (
  <svg width={width} height={height} fill={color}>
    {/* Your SVG path */}
  </svg>
);

<Confirmy customIcon={CustomIcon} />

Dialog Queuing

Handle multiple dialogs with the queuing system:

import { useDialog } from 'react-confirmy';

function MyComponent() {
  const { addDialog } = useDialog();

  const showDialogs = () => {
    // First dialog
    addDialog({
      title: 'First Action',
      message: 'Confirm first action?',
      onConfirm: () => {
        // Second dialog will show after first is confirmed
        addDialog({
          title: 'Second Action',
          message: 'Proceed with second action?',
          type: 'warning'
        });
      }
    });
  };

  return <button onClick={showDialogs}>Start Process</button>;
}

TypeScript Support

The library is written in TypeScript and includes comprehensive type definitions. All components, hooks, and utilities are fully typed.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT