Swal – Confirmation

The “SweetAlert” library, often referred to as “swal,” to create a custom and interactive alert modal with customized buttons, text, and icons. The modal is typically used for user confirmation or information display in a more visually appealing way than the browser’s default alert.

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

.then((willDelete) => { ... }): This is a callback that is executed when the user interacts with the modal and clicks one of the buttons. The parameter willDelete holds the user’s choice (true or false).

Inside the .then() callback:

  • If willDelete is true (user clicked the confirmation button), another swal() call is used to display a success message with an icon.
  • If willDelete is false (user clicked the cancel button), a different swal() call is used to display a message indicating the file is safe.

The code creates a custom alert modal using the “SweetAlert” library. It asks the user for confirmation to delete an imaginary file. Depending on the user’s choice, it displays a success message or a message indicating that the file is safe. The library is used to enhance the user experience and provide a more visually appealing way to display alerts.

Leave a comment

Your email address will not be published. Required fields are marked *