Usage 1. Import the plugin: import Swal from 'sweetalert2' // or via CommonJS const Swal = require ('sweetalert2')

SweetAlert2 Recipe Gallery - Code Examples for Specific Tasks Recipe Gallery A collection of easy-to-digest code examples for specific tasks in about 30 lines of code or less. Queue with Progress Steps …

23 import Swal from 'sweetalert2' import './styles.css' Swal. fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true,

import Swal from 'sweetalert2' ;(async () => { // LEFT SIDEBAR await Swal. fire({ title: 'Left sidebar 👋', position: 'top-start', showClass: {

18 import Swal from 'sweetalert2' import 'animate.css' Swal. fire({ title: 'I will shake when you click outside!', allowOutsideClick: () => { const popup = Swal. getPopup() as HTMLElement

document. body. innerHTML = ` <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div> ` Swal. fire({ title: 'I will blur the document with my backdrop', })

16 import Swal from 'sweetalert2' import './styles.css' Swal. fire({ title: 'Enter your name', input: 'text', customClass: {

While it is possible to use input: 'date | datetime-local | time | week | month' directly in Swal.fire (), you can also use any datepicker plugin to provide the consistent look and feel across browsers as well as …

Modal with iframe inside The best way to show iframes is to use the embed-iframe theme. Import the theme and set it in the swal options:

inputValue: 'fr', didOpen: () => { Swal. getInput()!. addEventListener('change', () => { i18next. changeLanguage(Swal. getInput()!. value) Swal. getTitle()!. innerText = i18next. t('hello') }) },