Sweet Alert 2 usage

Sweet Alert 2 usage

The Way to Add Modern and Interactive Alerts to Your Websites

SweetAlert2 is a popular JavaScript library that allows you to add user-friendly, customizable, and visually appealing alert messages to your websites and applications. By offering a more modern alternative to classic JavaScript alerts, it helps improve user experience. In this article, we will provide a comprehensive guide from the basic usage of SweetAlert2 to its advanced features.

Why SweetAlert2?

• Visual Appeal: SweetAlert2 comes with a flashy and modern design by default. This allows you to create alerts that match the aesthetics of your website.
• Customizability: You can personalize your alerts by customizing many elements such as colors, icons, titles, texts, and buttons.
• User friendly: You can create more effective alerts thanks to animations and interactive elements that attract users' attention.
• Easy Integration: SweetAlert2 can be easily integrated with popular web development technologies such as JavaScript, React, Angular, Vue.js.

Getting Started with SweetAlert2

1. Including the Library: To use SweetAlert2, you must first include the library in your website or application. You can do this by adding the following tag between the tags:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 

2. Basic Usage: Basic usage of SweetAlert2 is quite simple. In the example below, “Hello World!” We create a simple alert with the message:

Swal.fire('Hello world!');

This code says “Hello World!” centered on the screen. It will show an alert box with the message and an “OK” button.

Creating Advanced Alerts with SweetAlert2

SweetAlert2's real power lies in its customization options. Below are some examples you can use to create different types of alerts:

• Title and Text:

Swal.fire({
  title: Title,
  text: 'This is a SweetAlert2 alert!'
});

• Icons:

Swal.fire({
  icon: 'success',
  title: 'Successful!',
  text: 'The operation completed successfully.'
});

SweetAlert2 offers different icons such as 'success', 'error', 'warning', 'info' and 'question'.

• HTML Content:

Swal.fire({
  title: 'HTML content',
  icon: 'info',
  html: 'This text contains bold, underline and link.',
  showCloseButton: true
});

• Buttons:

Swal.fire({
  title: 'Are you sure?',
  text: "This action cannot be undone!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete!',
  cancelButtonText: 'Cancel'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

In this example, the user is shown an alert that requires confirmation. User “Yes, delete!” When you click the button, another warning is shown indicating that the operation was successful.

Do More with SweetAlert2

SweetAlert2 offers many more features than those mentioned in this article. To further customize the appearance and behavior of alerts, you can review the official documentation. There are also many examples and plugins created by the SweetAlert2 community.

SweetAlert2 is a powerful tool that can significantly improve the user experience of your website or app. Using the information provided in this article, you can start creating impressive and informative alerts.

Source:

https://github.com/mhtrkn/Mowatch

https://github.com/HasanHuseyinTopal/HotelMonitoring