react-confirm-window

react-confirm-window is a lightweight library that simplifies the implementation of window confirmation dialogs in React applications by offering a Promise-based API that works seamlessly with async/await syntax, similar to window.confirm.

It provides various customization options and can be used just by calling the useConfirm hook.

Features

• Modal header can be passed as props
• Modal title can be passed as props
• Confirm Button Label can be passed as props
• Confirm Button Label can be passed as props

Usage/Examples

For default modal component provide by the library :

Wrapper your App with the ConfirmDialogProvider

import {ConfirmDialogProvider} from 'react-confirm-window'
function App() {
  return (
      <ConfirmDialogProvider>
        <Component />
      </ConfirmDialogProvider>
      )
}

Import useConfirm hook and call it using async/await

import {useConfirm} from 'react-confirm-window'

function Component() {
  const confirm = useConfirm();
    const handleDelete = async()=>{
        const choice = await confirm({
            header: "Please Confirm",
            title: "Are you sure you want to delete?",
            closeButtonLable: "No",
            confirmButtonLable: "Yes",
        });

        // returns true if confirmed else false
        if(choice){
            // do something
        }
    }
  return (
      <div>
        Component
      </div>
      )
}

For custom modal component :

Create a modal commonent with props onClose and onConfirm. Use these two props in your onClick of close and confirm buttons respectively

function MyConfirmWindow({ onClose, onConfirm, title }) {
  return (
      <div className="confirm-modal-container confirmationDialog">
        <div className="modal-content">
          <div>My Confirm Window</div>
          <p>{title}</p>
          <div className="confirm-modal-button-container">
            <button className="cancelConfirmBtn" onClick={onClose}>
              No
            </button>
            <button className="confirmChangesBtn" onClick={onConfirm}>
              Yes
            </button>
          </div>
        </div>
      </div>
  );
}

Now provide this component to ConfirmDialogProvider as props

import ConfirmDialogProvider from 'react-confirm-window'
import MyConfirmWindow from './MyConfirmWindow'

function App() {
  return (
      <ConfirmDialogProvider dialogComponent={MyConfirmWindow}>
        <Component />
      </ConfirmDialogProvider>
      )
}

Import useConfirm hook and call it using async/await

import {useConfirm} from 'react-confirm-window'

function Component() {
  const confirm = useConfirm();
    const handleDelete = ()=>{
        const choice = await confirm({
            title: "Are you sure you want to delete?",
        });
        // returns true if confirmed else false
        if(choice){
            // do something
        }
    }
  return (
      <div>
        Component
      </div>
      )
}

Screenshots

Default dialog

Custom dialog