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

32 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 answers

0
Nicholas Tower 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)