React Confirm Lite ✨

An async, container-scoped confirmation lite for React with fully customizable dialogs.

🚀 Quick Start

Complete Example

Place <ConfirmContainer /> in your app (usually in root layout) and use it with confirm

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

function App() {
  async function handleAction() {
    const result = await confirm('Are you sure?');
    
    if (result) {
      console.log('User confirmed!');
    } else {
      console.log('User cancelled!');
    }
  }
  return (
    <div>
      {/* Your app content */}
      <ConfirmContainer />
    </div>
  );
}

Confirm Container Props

Prop	Type	Default	Description
animation	AnimationType	slide	Animation type (16 options)
animationDuration	number	300	Base animation duration (ms)
animationDurationIn	number	-	Enter animation duration
animationDurationOut	number	-	Exit animation duration
defaultColorScheme	ColorSchema	dark	Default color scheme
closeOnEscape	boolean	true	Close with ESC key
closeOnClickOutside	boolean	true	Close on backdrop click
classes	ConfirmClasses	{}	Custom CSS classes

Confirm API options

await confirm("Are you sure?");
// OR
await confirm({message:"Are you sure?",title:"Confirm",cancelText:"No",okText:"Yes",colorSchema:"light"})

Custom Dialog

To make custom dialog pass children like this

import { confirm, ConfirmContainer } from "react-confirm-manager"

const CustomDialog = () => {
    const handleClick = async () => {
        const isConfirmed = await confirm('Are you sure?')
        if (isConfirmed === null) console.log('User clicked outside or pressed escape')
        else if (isConfirmed) console.log('Ok')
        else console.log('Cancel')
    }

    return (
        <div>
            <button onClick={handleClick}>
                Try
            </button>
            <ConfirmContainer
                animation="flip"
                animationDuration={300}
                closeOnEscape={true}
                closeOnClickOutside={true}
                lockScroll={true}
            >
                {({
                    isVisible,
                    confirm,
                    handleCancel,
                    handleOk,
                    containerRef,
                    animationClass,
                    animationStyle
                }) => (
                    <div
                        className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-opacity duration-300`}
                    >
                        {/* Backdrop */}
                        <div
                            className={`absolute inset-0`}
                            onClick={handleCancel}
                        />

                        {/* Alert Modal - Uses Tailwind's dark mode classes */}
                        <div
                            ref={containerRef}
                            className={`relative z-10 w-full max-w-md transform rounded-2xl p-6 shadow-2xl transition-all duration-300 ${animationClass} bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 border dark:border-gray-800`}
                            style={animationStyle}
                        >
                            {/* Title */}
                            <h2 className="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
                                {confirm.title}
                            </h2>

                            {/* Message */}
                            <p className="mb-6 text-gray-600 dark:text-gray-300">
                                {confirm.message}
                            </p>

                            {/* Buttons */}
                            <div className="flex justify-end space-x-3">
                                <button
                                    onClick={handleCancel}
                                    disabled={!isVisible}
                                    className="rounded-lg px-4 py-2 font-medium transition-colors text-gray-700 dark:text-gray-300  bg-gray-100 dark:bg-gray-800/50 hover:bg-gray-200 dark:hover:bg-gray-800 disabled:opacity-50"
                                >
                                    {confirm.cancelText || 'Cancel'}
                                </button>
                                <button
                                    onClick={handleOk}
                                    disabled={!isVisible}
                                    className="rounded-lg px-4 py-2 font-medium text-white transition-colors bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 disabled:opacity-50"
                                >
                                    {confirm.okText || 'OK'}
                                </button>
                            </div>
                        </div>
                    </div>
                )}
            </ConfirmContainer>
        </div>
    )
}

export default CustomDialog

Prop	Type	Description
isVisible	boolean	It's value is true when it starts showing and returns false when it starts hiding. It can be used when you made your own custom animation but, if you are using an built in animation then you will not need it.
confirm	{ id?: string; title?: string; message: string; colorSchema?: ColorSchema; okText?: string; cancelText?: string; };	It contains the data which you passed through confirm api.
containerRef	React.RefObject<HTMLDivElement | null>	If you want that container hide when you click outside the container then it hides with animation then, you will have to use it mean you will have to give this ref to the container.
animationClass	string	It contains the classes for animation.
animationStyle	React.CSSProperties	It contains the css properties for animation.
handleCancel	() => void	You can give it to the cancle button and you will get false by the confirm api.
handleOk	() => void	You can give it to the ok button and you will get true by the confirm api.