Search code examples
reactjssweetalert

How to have sweetalert return true/false for confirm without promise? in react


//DEFINE
function sweetConfirm(title, message, callback) {
swal({
title: title,
text: message,
buttons: true
}).then((confirmed) => {
  if (confirmed) {
     callback();
   }
});
}
export default sweetConfirm;

//USAGE
sweetConfirm('Confirm action!', 'Are you sure?', function (confirmed) {
if (confirmed) {
   console.log("confirmed");
}
else {
   console.log("cancel");
}

as i have to use swal confirmation alert multiple times so i have decided to make an template/component to use it multiple times on different pages. but i need the value of button i have pressed in the confirmation box.


Solution

  • I'm not quite clear why you don't want to use promises, since swal is already promised based so it's easiest to just use it as it is:

    function sweetConfirm(title, message) {
      return swal({ // Added return
        title: title,
        text: message,
        buttons: true
      });
    }
    
    // Usage:
    sweetConfirm('Confirm action!', 'are you sure?')
      .then(confirmed => {
        console.log(confirmed);
      });
    // Or with async await:
    async function someFunction() {
      const confirmed = await sweetConfirm('Confirm action!', 'are you sure?');
      console.log(confirmed);
    }
    

    But if you do want to turn it into a callback instead of a promise then instead of doing this:

    .then((confirmed) => {
      if (confirmed) {
         callback();
       }
    });
    

    You'll do this:

    .then((confirmed) => {
      callback(confirmed);
    });
    

    Or equivalently:

    .then(callback)