Confirm Dialog

A flexible and accessible confirm dialog for React app.

Installation

npm install @omit/react-confirm-dialog

Confirm Dialog Types

Explore various customization options for the confirm dialog. Click on each type to see it in action and view the corresponding code.


const confirm = useConfirm()

const result = await confirm({
  title: 'Confirm Action',
  description: 'Are you sure you want to proceed?',
})

console.log(result ? 'Confirmed' : 'Canceled')

Usage

Render the ConfirmDialogProvider at the root of your application.


// confirm-dialog-provider.tsx
'use client'

import {
  ConfirmDialogProvider as BaseConfirmDialogProvider,
  ConfirmOptions
} from '@omit/react-confirm-dialog'

interface Props {
  children: React.ReactNode
  defaultOptions?: ConfirmOptions
}

export const ConfirmDialogProvider = ({ children, defaultOptions }: Props) => {
  return (
    <BaseConfirmDialogProvider defaultOptions={defaultOptions}>
      {children}
    </BaseConfirmDialogProvider>
  )
}

export default ConfirmDialogProvider

// layout.tsx
import { ConfirmDialogProvider } from '@/confirm-dialog-provider'

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