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

npm install react-confirm-lite
# or
yarn add react-confirm-lite
# or
pnpm add react-confirm-lite

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>
  );
}

By default it shows the first rendered component. But, if you want to show a specific container by confirm api no matters where it is then you can pass the id like this

// In confirm Api
confirm({id:'1' , message:'Are you sure?'})
// And in confirm Container
<ConfirmContainer id='1'/>

And make sure that not to pass same id to different <ConfirmContainer /> In this way It will show both of these containers.

One more thing that if you want to show the closest container to button to which you clicked then you can do like this.

confirm('Are you sure?', true)

or if you want that everytime it show the closest without passing true in api then you can do like this in root component

import { showClosest } from 'react-confirm-lite'
showClosest()

For more info checkout website.