react-confirm-lite

v1.2.5

Published

a day ago

A lightweight, promise-based confirm dialog for React, designed to be as easy to use as react-toastify, while remaining fully customizable.

Downloads

2,361

0High
0Medium
0Low

codeinease

react-confirm react-confirm-lite react confirm lite react confirm confirm

react-confirm-lite

A lightweight, promise-based confirm dialog for React with built-in styling

✨ Features:

Promise-based API like window.confirm
Built-in styling with multiple color schemes
Zero dependencies
Fully customizable
TypeScript support
Queue system for multiple dialogs
Works with Next.js App Router (no 'use client' needed)
Automatic CSS injection (no separate imports needed)

Recommendations

Always use the latest version for bug fixes and improvements
If you face any issues, please report them on GitHub

react-confirm-lite sample

Quick Comparison

| Feature | react-confirm-lite | react-confirm | react-confirm-toast | |---------|-------------------|---------------|---------------------| | Built-in styling | ✅ Multiple color schemes | ❌ None | ✅ Toast style | | Promise-based | ✅ | ✅ | ✅ | | Zero dependencies | ✅ | ✅ | ✅ | | Queue system | ✅ | ❌ | ❌ | | Automatic CSS | ✅ No separate imports | ❌ | ❌ | | Next.js App Router | ✅ Works out of the box | ❌ Needs 'use client' | ✅ |

Why Choose react-confirm-lite?

If you want a simple, lightweight confirm dialog that just works without any configuration, react-confirm-lite is perfect. No separate CSS imports, no 'use client' directives needed in Next.js App Router, and fully customizable when you need it.

🔗 Live Demo

Getting Started

Step 1: Install the package:

npm install react-confirm-lite

Step 2: Import in your component:

import { confirm, ConfirmContainer } from 'react-confirm-lite';

Step 3: Add ConfirmContainer to your component tree:

function App() {
  return (
    <>
      <ConfirmContainer />
      {/* Your app content */}
    </>
  );
}

Step 4: Use the confirm function:

const handleAction = async () => {
  const isConfirmed = await confirm('Are you sure?');
  if (isConfirmed) {
    // Perform action
    console.log('Confirmed!');
  }
};

Complete Example:

import { confirm, ConfirmContainer } from 'react-confirm-lite';

function App() {
  const handleDelete = async () => {
    const isConfirmed = await confirm('Are you sure you want to delete this item?');
    if (isConfirmed) {
      // Delete logic here
      console.log('Item deleted');
    }
  };

  return (
    <div>
      <button onClick={handleDelete}>Delete Item</button>
      <ConfirmContainer />
    </div>
  );
}

Advanced Usage

Custom Options:

const handleCustomConfirm = async () => {
  const isConfirmed = await confirm({
    title: "Delete Item",
    message: "This action cannot be undone. Are you sure?",
    cancelText: 'No, keep it',
    okText: 'Yes, delete',
    colorSchema: 'red',
    isDestructive: true
  });
  
  if (isConfirmed) {
    // Delete item
  }
};

Custom Color Scheme:

<ConfirmContainer defaultColorSchema="light" />
// Available options: 'light', 'dark', 'blue', 'red', 'green', 'purple'

Custom Styling:

<ConfirmContainer 
  classes={{
    overlay: "bg-black/50",
    wrapper: "rounded-xl shadow-2xl",
    title: "text-2xl font-bold",
    message: "text-gray-600",
    button: "px-6 py-3 rounded-lg font-medium",
    cancel: "border border-gray-300 hover:bg-gray-50",
    ok: "bg-blue-600 hover:bg-blue-700 text-white"
  }}
/>

Fully Custom UI with Render Prop:

<ConfirmContainer animationDuration={500}>
  {({ isVisible, confirm, handleCancel, handleOk }) => (
    <div className={`modal ${isVisible ? 'show' : 'hide'}`}>
      <div className="modal-content">
        <h2>{confirm.title}</h2>
        <p>{confirm.message}</p>
        <div className="modal-actions">
          <button onClick={handleCancel}>
            {confirm.cancelText || 'Cancel'}
          </button>
          <button onClick={handleOk}>
            {confirm.okText || 'OK'}
          </button>
        </div>
      </div>
    </div>
  )}
</ConfirmContainer>

Next.js App Router Support

Works automatically! No 'use client' directive needed for the library. The library handles everything internally.

Server Components Example:

// app/layout.tsx
import { ConfirmContainer } from 'react-confirm-lite';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <ConfirmContainer />
      </body>
    </html>
  );
}

// app/page.tsx (server component)
import { confirm } from 'react-confirm-lite';

export default async function Page() {
  // Server-side logic here
  
  return (
    <form action={async () => {
      'use server';
      const isConfirmed = await confirm('Are you sure?');
      if (isConfirmed) {
        // Server action
      }
    }}>
      <button>Submit</button>
    </form>
  );
}

Client Component Example:

'use client';
import { confirm, ConfirmContainer } from 'react-confirm-lite';

export default function ClientComponent() {
  const handleClick = async () => {
    const result = await confirm('Confirm action?');
    if (result) {
      // Handle confirmation
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <ConfirmContainer />
    </div>
  );
}

API Reference

`confirm(message: string | ConfirmOptions): Promise<boolean>`

Displays a confirmation dialog. Returns a promise that resolves to true if confirmed, false if cancelled.

String usage:

await confirm('Simple message');
// Equivalent to: { title: 'Confirm', message: 'Simple message' }

Object usage:

await confirm({
  title: 'Warning',
  message: 'This action cannot be undone',
  cancelText: 'Cancel',
  okText: 'Delete',
  colorSchema: 'red',
  isDestructive: true
});

`ConfirmContainer` Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultColorSchema | ColorSchema | 'dark' | Default color scheme | | animationDuration | number | 300 | Animation duration in ms | | classes | ConfirmClasses | {} | Custom CSS classes | | children | Render function | - | For complete UI customization |

Types:

type ColorSchema = 'light' | 'dark' | 'blue' | 'red' | 'green' | 'purple';

interface ConfirmClasses {
  overlay?: string;
  wrapper?: string;
  title?: string;
  message?: string;
  button?: string;
  cancel?: string;
  ok?: string;
}

interface ConfirmOptions {
  title?: string;
  message: string;
  cancelText?: string;
  okText?: string;
  colorSchema?: ColorSchema;
  isDestructive?: boolean;
}

Troubleshooting

❌ Dialog not appearing?

Make sure <ConfirmContainer /> is rendered in your component tree
Check that you're not conditionally rendering it in a way that unmounts it

❌ Multiple dialogs overlapping?

The library has a built-in queue system that handles multiple confirm requests sequentially

❌ Styling not working?

If using custom classes, ensure they have proper CSS specificity
Try using !important flag for custom styles if needed
Make sure you're on the latest version

❌ Animation issues with custom UI?

When using the children render prop, use the isVisible prop for animations
Set appropriate animationDuration to match your CSS transitions

❌ Next.js hydration errors?

The library is designed to work with Next.js App Router
If using in a layout, ensure it's placed after dynamic content

Features in Detail

🎨 Multiple Color Schemes

Six built-in color schemes: light, dark, blue, red, green, purple. Set globally or per confirm dialog.

🔄 Queue System

Multiple confirm requests are queued and shown one at a time, preventing overlapping dialogs.

🎯 Zero Configuration

Works out of the box with default styling. No CSS imports needed.

🔧 Fully Customizable

From simple class overrides to complete UI replacement with render props.

📱 Responsive Design

Built-in responsive styling that works on all screen sizes.

🔒 Type Safety

Full TypeScript support with comprehensive type definitions.

Performance

Zero dependencies: Only React as a peer dependency
Tree-shakeable: Only imports what you use
Small bundle size: ~5KB gzipped (including styles)
Optimized renders: Minimal re-renders with React.memo

Migration from Older Versions

If you're upgrading from version <1.3.0:

'use client' not needed: The library handles this internally
Simpler API: Same functions, better internals

Contributing

Contributions are welcome! Please:

Fork the repository
Create a feature branch
Add tests for your changes
Submit a pull request

Author

Saad Nasir - Full Stack Developer

GitHub: @SaadNasir-git
For support: Open an issue on GitHub

License

npm version bundle size npm downloads license

Support

If you find this library helpful, please consider:

⭐ Starring the repository on GitHub
📢 Sharing with your network
🐛 Reporting issues you encounter
💡 Suggesting new features

Happy coding! 🚀

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-confirm-lite

Recommendations

Quick Comparison

Why Choose react-confirm-lite?

🔗 Live Demo

Getting Started

Step 1: Install the package:

Step 2: Import in your component:

Step 3: Add ConfirmContainer to your component tree:

Step 4: Use the confirm function:

Complete Example:

Advanced Usage

Custom Options:

Custom Color Scheme:

Custom Styling:

Fully Custom UI with Render Prop:

Next.js App Router Support

Server Components Example:

Client Component Example:

API Reference

confirm(message: string | ConfirmOptions): Promise<boolean>

ConfirmContainer Props:

Types:

Troubleshooting

❌ Dialog not appearing?

❌ Multiple dialogs overlapping?

❌ Styling not working?

❌ Animation issues with custom UI?

❌ Next.js hydration errors?

Features in Detail

🎨 Multiple Color Schemes

🔄 Queue System

🎯 Zero Configuration

🔧 Fully Customizable

📱 Responsive Design

🔒 Type Safety

Performance

Migration from Older Versions

Contributing

Author

License

Support

`confirm(message: string | ConfirmOptions): Promise<boolean>`

`ConfirmContainer` Props: