Creating Nice Alerts with sweetAlert — SitePoint (2024)

SweetAlert allows you to customize the appearance of your alerts to match your website’s theme. You can change the color, font, size, and even the animation of the alert. To do this, you need to pass an object with the desired properties to the SweetAlert function. For example, to change the color and font of the alert, you would use the following code:

swal({
title: "Custom alert!",
text: "This is a custom alert with a different color and font.",
icon: "success",
button: "Aww yiss!",
className: "custom-swal"
});
Then, in your CSS file, you would define the .custom-swal class like this:

.custom-swal {
background-color: #f6f7f9;
font-family: 'Comic Sans MS', cursive, sans-serif;
}

Yes, SweetAlert allows you to use HTML in your alerts. This can be useful if you want to include links, images, or other HTML elements in your alert. To use HTML in a SweetAlert, you need to set the html parameter to true and then include your HTML in the text parameter. Here’s an example:

swal({
title: "HTML alert!",
text: "<strong>This is a bold text.</strong><br><a href='https://www.example.com'>This is a link</a>",
icon: "info",
button: "Got it!",
html: true
});

SweetAlert allows you to add one or more buttons to your alerts. These buttons can be used to allow the user to confirm or cancel the action that triggered the alert. To add buttons to a SweetAlert, you need to use the buttons parameter. This parameter takes an array of strings, where each string is the text for a button. Here’s an example:

swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: ["Cancel", "Delete"],
dangerMode: true,
});

In this example, the alert will have two buttons: “Cancel” and “Delete”. The “Delete” button is styled differently because the dangerMode parameter is set to true.

Yes, you can use SweetAlert with AJAX to display alerts based on the result of an AJAX request. This can be useful if you want to display a success message after a successful AJAX request, or an error message if the request fails. To do this, you would use the then method of the SweetAlert function to handle the promise that is returned by the AJAX request. Here’s an example:

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) {
$.ajax({
url: '/delete-file',
type: 'POST',
data: {fileId: '123'},
success: function() {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
},
error: function() {
swal("Oops! Something went wrong!", {
icon: "error",
});
}
});
} else {
swal("Your imaginary file is safe!");
}
});

In this example, if the user clicks the “Delete” button, an AJAX request is made to delete a file. If the request is successful, a success alert is displayed. If the request fails, an error alert is displayed.

You can use SweetAlert in a form to display a confirmation message before the form is submitted. This can be useful if you want to give the user a chance to review their input before it is sent to the server. To do this, you would use the preventDefault method of the event object to prevent the form from being submitted, and then use the then method of the SweetAlert function to submit the form if the user confirms. Here’s an example:

$('form').on('submit', function(e) {
e.preventDefault();

swal({
title: "Are you sure?",
text: "Once submitted, you will not be able to change your input!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willSubmit) => {
if (willSubmit) {
this.submit();
} else {
swal("Your input is safe!");
}
});
});

In this example, if the user clicks the “Submit” button, a confirmation alert is displayed. If the user confirms, the form is submitted. If the user cancels, a relief alert is displayed.

SweetAlert allows you to display a loading spinner in your alerts. This can be useful if you want to indicate that a process is running in the background and the user needs to wait. To display a loading spinner, you need to use the button parameter with a false value and the closeOnClickOutside parameter with a false value as well. Here’s an example:

swal({
title: "Loading...",
text: "Please wait while we process your request.",
icon: "info",
button: false,
closeOnClickOutside: false,
});

In this example, the alert will display a “Loading…” message and a loading spinner. The user will not be able to close the alert by clicking outside of it.

You can close a SweetAlert programmatically by calling the swal.close() method. This can be useful if you want to close the alert after a certain condition is met, or after a certain amount of time has passed. Here’s an example:

swal({
title: "This alert will close in 5 seconds!",
icon: "info",
button: false,
timer: 5000,
});

In this example, the alert will close automatically after 5 seconds.

SweetAlert supports promises, which means you can use it in combination with async/await to handle user input in a more readable and maintainable way. Here’s an example:

async function deleteFile() {
const willDelete = await swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
});

if (willDelete) {
// Delete the file...
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
}

In this example, the swal function returns a promise that resolves to the value of the button that the user clicked. This value is then used to determine whether to delete the file or not.

SweetAlert has a React version called react-sweetalert. This version allows you to use SweetAlert in your React applications in a more idiomatic way. Here’s an example:

import React from 'react';
import SweetAlert from 'react-sweetalert';

class MyApp extends React.Component {
state = {
alert: null
};

showAlert = () => {
this.setState({
alert: (
<SweetAlert
title="Are you sure?"
text="Once deleted, you will not be able to recover this imaginary file!"
showCancelButton
onConfirm={this.deleteFile}
onCancel={this.hideAlert}
/>
)
});
};

hideAlert = () => {
this.setState({
alert: null
});
};

deleteFile = () => {
// Delete the file...
this.hideAlert();
};

render() {
return (
<div>
<button onClick={this.showAlert}>Delete file</button>
{this.state.alert}
</div>
);
}
}

export default MyApp;

In this example, the SweetAlert component is rendered conditionally based on the state of the MyApp component. The onConfirm and onCancel props are used to handle the user’s input.

SweetAlert has a Vue.js version called vue-sweetalert2. This version allows you to use SweetAlert in your Vue.js applications in a more idiomatic way. Here’s an example:

<template>
<button @click="showAlert">Delete file</button>
</template>

<script>
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(VueSweetalert2);

export default {
methods: {
showAlert() {
this.$swal({
title: 'Are you sure?',
text: 'Once deleted, you will not be able to recover this imaginary file!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it'
}).then((result) => {
if (result.value) {
// Delete the file...
this.$swal('Deleted!', 'Your file has been deleted.', 'success');
} else if (result.dismiss === 'cancel') {
this.$swal('Cancelled', 'Your imaginary file is safe :)', 'error');
}
});
}
}
};
</script>

In this example, the $swal method is used to display the alert. The then method is used to handle the user’s input.