Sweetalert2
Overview Official Website
A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for popup boxes.
Import Package
import Swal from "sweetalert2";
Add Package
yarn add sweetalert2 --save
Remove Package
yarn remove sweetalert2 Or you can remove package
by removing specific package from package.json .
Examples
| Title | Example |
|---|---|
| A Basic Message |
const showAlert = () => {
Swal.fire("Any fool can use a computer!");
};
|
| A Title with a Text Under<< /th> |
const titleText = () => {
Swal.fire("The Internet?", "That thing is still around?", "question");
};
|
| A success message! |
const successmsg = () => {
Swal.fire("Good job!", "You clicked the button!", "success");
};
|
| A modal with a title, an error icon, a text, and a footer |
const saError = () => {
Swal.fire({
icon: "error",
title: "Oops...",
text: "Something went wrong!",
footer: 'Why do I have this issue?',
});
};
|
| A modal window with a long content inside |
const content = () => {
Swal.fire({
imageUrl: "https://placeholder.pics/svg/300x1500",
imageHeight: 1500,
imageAlt: "A tall image",
});
};
|
| A warning message, with a function attached to the "Confirm"-button... |
const confirm = () => {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
|
| By passing a parameter, you can execute something else for "Cancel". |
const cancel = () => {
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "success",
cancelButton: "btn btn-danger",
},
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
});
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
swalWithBootstrapButtons.fire(
"Deleted!",
"Your file has been deleted.",
"success"
);
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
"Cancelled",
"Your imaginary file is safe :)",
"error"
);
}
});
};
|
| A message with custom Image Header |
const imageHeader = () => {
Swal.fire({
title: "Sweet!",
text: "Modal with a custom image.",
imageUrl: require("@/assets/images/logo-dark.png"),
imageHeight: 20,
confirmButtonColor: "#556ee6",
});
};
|
| A message with auto close timer |
const timer = () => {
let timerInterval: string | number | NodeJS.Timeout | undefined;
Swal.fire({
title: "Auto close alert!",
html: "I will close in milliseconds.",
timer: 2000,
timerProgressBar: true,
didOpen: () => {
Swal.showLoading();
const b: any = Swal.getHtmlContainer()?.querySelector("b");
if (b) {
timerInterval = setInterval(() => {
b.textContent = Swal.getTimerLeft();
}, 100);
}
},
willClose: () => {
clearInterval(timerInterval);
},
}).then((result) => {
/* Read more about handling dismissals below */
if (result.dismiss === Swal.DismissReason.timer) {
console.log("I was closed by the timer");
}
});
};
|
| Custom HTML description and buttons |
const custom = () => {
Swal.fire({
title: "HTML example",
icon: "info",
html:
"You can use bold text, " +
'links ' +
"and other HTML tags",
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText: ' Great!',
confirmButtonAriaLabel: "Thumbs up, great!",
cancelButtonText: '',
cancelButtonAriaLabel: "Thumbs down",
});
};
|
| A dialog with three buttons |
const threeButton = () => {
Swal.fire({
title: "Do you want to save the changes?",
showDenyButton: true,
showCancelButton: true,
confirmButtonText: "Save",
denyButtonText: `Don't save`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire("Saved!", "", "success");
} else if (result.isDenied) {
Swal.fire("Changes are not saved", "", "info");
}
});
};
|
| A custom positioned dialog |
const position = () => {
Swal.fire({
position: "top-end",
icon: "success",
title: "Your work has been saved",
showConfirmButton: false,
timer: 1500,
});
};
|
| A message with custom width, padding and background |
const customBackground = () => {
Swal.fire({
title: "Custom width, padding, background.",
width: 600,
padding: 100,
confirmButtonColor: "#556ee6",
background:
"#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)",
});
};
|
| Ajax request example |
const ajax = () => {
Swal.fire({
title: "Submit email to run ajax request",
input: "email",
showCancelButton: true,
confirmButtonText: "Submit",
showLoaderOnConfirm: true,
confirmButtonColor: "#556ee6",
cancelButtonColor: "#f46a6a",
preConfirm: (email) => {
return new Promise(function (resolve, reject) {
setTimeout(() => {
if (email === "taken@example.com") {
Promise.reject(new Error("This email is already taken."));
} else {
resolve("Done!");
}
}, 2000);
});
},
allowOutsideClick: false,
}).then((email) => {
Swal.fire({
title: "Ajax request finished!",
html: "Submitted email: " + email,
});
});
};
|