Last active
September 8, 2023 16:59
-
-
Save collardeau/6a0c9777246db4f7b1764b3ccafdf822 to your computer and use it in GitHub Desktop.
Svelte: SweetAlert2 setup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
import Swal from "sweetalert2"; | |
// npm i sweetalert2@9.7.2 | |
// https://sweetalert2.github.io/ | |
</script> | |
<!-- a simple alert --> | |
<button | |
on:click={() => { | |
Swal.fire('hello sweet alert'); | |
}}> | |
alert | |
</button> | |
<!-- an alert with async flow --> | |
<button | |
on:click={() => { | |
Swal.fire({ | |
title: 'Are you sure?', | |
text: '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) { | |
Swal.fire('Deleted!', 'Your imaginary file has been deleted.', 'success'); | |
} else if (result.dismiss === Swal.DismissReason.cancel) { | |
Swal.fire('Cancelled', 'Your imaginary file is safe :)', 'error'); | |
} | |
}); | |
}}> | |
confirm | |
</button> |
just decided today to try swal on svelte and this was posted 10h ago, thanks!
Don't forget to load the css too
import Swal from "sweetalert2";
//For the css, you can put it in main.js
import "sweetalert2/dist/sweetalert2.min.css";
Hi Do you know how to make sweetalert text reactive so I can pas a variable to the text and update it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
found it very useful, thanks a bunch :)