React Confirm Manager ✨

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

🔗 Live Demo

📦 Installation

If you are using SSR

npm install [email protected]

If you are not using SSR then

npm install [email protected]
# or
npm install [email protected]

🚀 Quick Start

Complete Example

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

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

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

Important for v1

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-manager'
showClosest()

Important for v2

If you're using v2, then closest feature will not work you should have only one <ConfirmContainer/> in the root file otherwise it can create problem.

For more info checkout the homepage