Confirmation

A flexible, accessible React modal component for confirmation dialogs with multiple variants, custom styling, and async action support. Built with TypeScript and no external dependencies (except React and Lucide icons).

Installation

npm install @sarthakb009/confirmation

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0

Usage

Basic Example

import { ConfirmationModal } from '@sarthakb009/confirmation';
import { useState } from 'react';

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      
      <ConfirmationModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => {
          console.log('Confirmed!');
          setIsOpen(false);
        }}
        title="Are you sure?"
        description="This action cannot be undone."
      />
    </>
  );
}

With Variants

import { ConfirmationModal } from '@sarthakb009/confirmation';

function App() {
  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={async () => {
        // Async operation
        await deleteItem();
      }}
      variant="danger" // 'danger' | 'primary' | 'success' | 'neutral'
      title="Delete Item"
      description="This will permanently delete the item."
      confirmText="Delete"
      cancelText="Cancel"
    />
  );
}

With Loading State

import { ConfirmationModal } from '@sarthakb009/confirmation';
import { useState } from 'react';

function App() {
  const [isLoading, setIsLoading] = useState(false);

  const handleConfirm = async () => {
    setIsLoading(true);
    try {
      await performAction();
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={handleConfirm}
      isLoading={isLoading}
      variant="primary"
    />
  );
}

Custom Styling

import { ConfirmationModal } from '@sarthakb009/confirmation';

function App() {
  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={() => {}}
      width="500px"
      borderRadius="16px"
      primaryColor="#ff6b6b"
      backgroundColor="#ffffff"
      textColor="#333333"
    />
  );
}

Custom Icon

import { ConfirmationModal } from '@sarthakb009/confirmation';
import { AlertTriangle } from 'lucide-react';

function App() {
  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={() => {}}
      icon={<AlertTriangle size={24} color="#ef4444" />}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | isOpen | boolean | - | Yes | Controls modal visibility | | onClose | () => void | - | Yes | Callback fired when modal is closed (X button, overlay, or Escape key) | | onConfirm | () => void \| Promise<void> | - | Yes | Callback fired when confirm button is clicked. Can be async | | title | string | "Are you sure?" | No | Modal title text | | description | string | "This action cannot be undone." | No | Modal description text | | confirmText | string | "Confirm" | No | Text for confirm button | | cancelText | string | "Cancel" | No | Text for cancel button | | variant | 'danger' \| 'primary' \| 'success' \| 'neutral' | 'primary' | No | Visual variant (affects colors and icon) | | isLoading | boolean | false | No | Shows loading state on confirm button | | width | string | "400px" | No | Modal width | | borderRadius | string | "12px" | No | Border radius of modal | | fontFamily | string | "system-ui, -apple-system, sans-serif" | No | Font family | | primaryColor | string | undefined | No | Override primary/confirm button color | | cancelColor | string | "#374151" | No | Cancel button text color | | backgroundColor | string | "#ffffff" | No | Modal background color | | textColor | string | "#111827" | No | Text color | | icon | React.ReactNode | undefined | No | Custom icon (overrides variant icon) |

Features

• ✅ Multiple Variants: Danger, primary, success, and neutral styles
• ✅ Async Support: Handles async confirm actions
• ✅ Loading States: Built-in loading indicator
• ✅ Keyboard Support: Escape key to close
• ✅ Click Outside: Click overlay to close
• ✅ Customizable: Full control over colors, sizes, and icons
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and focus management
• ✅ Body Scroll Lock: Prevents background scrolling when open

TypeScript

The component is written in TypeScript and exports all types:

import { ConfirmationModal, ConfirmationModalProps } from '@sarthakb009/confirmation';

const props: ConfirmationModalProps = {
  isOpen: true,
  onClose: () => {},
  onConfirm: async () => {},
  variant: "danger",
};

License

MIT