Installations
npm install sweetalert2-presetDeveloper Guide
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.10.0
NPM Version
10.2.3
Score
57.6
Supply Chain
97.6
Quality
75.4
Maintenance
50
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Download Statistics
Total Downloads
3,725
Last Day
6
Last Week
14
Last Month
65
Last Year
1,039
Bundle Size
1.74 kB
Minified
567.00 B
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
0.3.2
Package Id
sweetalert2-preset@0.3.2
Unpacked Size
21.37 kB
Size
5.46 kB
File Count
8
NPM Version
10.2.3
Node Version
20.10.0
Publised On
25 Nov 2023
Total Downloads
Cumulative downloads
Total Downloads
3,725
Last day
-53.8%
6
Compared to previous day
Last week
-33.3%
14
Compared to previous week
Last month
41.3%
65
Compared to previous month
Last year
-43.9%
1,039
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
SweetAlert2 Preset 
5 out-of-the-box presets for sweetalert2, refer to MessageBox of element-plus.
⚠ DEPRECATED
Warning
SweetAlert2 Preset has been upgraded to faim by the the same author cloydlau
Not only are the capabilities enhanced, but for subsequent bug fixes and iterative optimization, please migrate as soon as possible
Install
Peer Dependencies
sweetalert2
NPM
1npm i sweetalert2-preset sweetalert2
1import Swal from 'sweetalert2'
2import SwalPreset from 'sweetalert2-preset'
3
4Object.assign(Swal, SwalPreset)
5
6Swal.fire()
7Swal.success()
8Swal.info()
9Swal.warning()
10Swal.error()
11Swal.confirm()CDN + ESM
⚠ Not yet supported because
sweetalert2does not export ESM.
CDN + IIFE
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8" /> 6</head> 7 8<body> 9 <script src="https://cdn.jsdelivr.net/npm/sweetalert2"></script> 10 <script src="https://cdn.jsdelivr.net/npm/sweetalert2-preset"></script> 11 <script> 12 Object.assign(Swal, SwalPreset) 13 14 Swal.fire() 15 Swal.success() 16 Swal.info() 17 Swal.warning() 18 Swal.error() 19 Swal.confirm() 20 </script> 21</body> 22 23</html>
Life Cycle
1SwalPreset.success('Operation Success').then(() => { 2 // onClose 3}) 4 5SwalPreset.info('Information').then(() => { 6 // onClose 7}) 8 9SwalPreset.warning('Warning').then(() => { 10 // onClose 11}) 12 13SwalPreset.error('Error Occurred').then(() => { 14 // onClose 15}) 16 17SwalPreset.confirm('Are You Sure?').then(() => { 18 // onConfirmed 19}).catch((e) => { 20 if (e.isDenied) { 21 // onDenied 22 } else if (e.isDismissed) { 23 // onDismissed 24 } 25})
Example: Coercive Confirm
No cancel, must confirm.
1SwalPreset.confirm({ 2 titleText: 'Confirm to continue', 3 showCancelButton: false, 4 allowOutsideClick: false, 5 allowEscapeKey: false, 6})
Example: Complex Confirm
1// form with async submitting 2SwalPreset.confirm({ 3 input: 'text', 4 inputAttributes: { 5 placeholder: 'Remark' 6 }, 7 confirmButtonText: 'Agree', 8 showLoaderOnConfirm: true, 9 preConfirm: (input) => { 10 return new Promise((resolve) => { 11 setTimeout(resolve, 500) 12 }).then(() => { 13 alert('Agree Success') 14 }).catch((e) => { 15 alert('Agree Failed') 16 }) 17 }, 18 showDenyButton: true, 19 denyButtonText: 'Deny', 20 returnInputValueOnDeny: true, 21 preDeny: (input) => { 22 if (input) { 23 return new Promise((resolve, reject) => { 24 setTimeout(reject, 500) 25 }).then(() => { 26 alert('Deny Success') 27 }).catch((e) => { 28 alert('Deny Failed') 29 }) 30 } else { 31 Swal.showValidationMessage('Please fill in the remark') 32 return false 33 } 34 }, 35}).then((e) => { 36 alert('Agreed') 37}).catch((e) => { 38 if (e.isDenied) { 39 alert('Denied') 40 } else if (e.isDismissed) { 41 alert('Dismissed') 42 } 43})
Changelog
Detailed changes for each release are documented in the release notes
No vulnerabilities found.
No security vulnerabilities found.