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

34 Views Asked by At
//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.

1

There are 1 best solutions below

0
On BEST ANSWER

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)