Sweetalert2-preset NPM

⚠ 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

npm i sweetalert2-preset sweetalert2

import Swal from 'sweetalert2'
import SwalPreset from 'sweetalert2-preset'

Object.assign(Swal, SwalPreset)

Swal.fire()
Swal.success()
Swal.info()
Swal.warning()
Swal.error()
Swal.confirm()

CDN + ESM

⚠ Not yet supported because sweetalert2 does not export ESM.

CDN + IIFE

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2-preset"></script>
  <script>
    Object.assign(Swal, SwalPreset)

    Swal.fire()
    Swal.success()
    Swal.info()
    Swal.warning()
    Swal.error()
    Swal.confirm()
  </script>
</body>

</html>

Life Cycle

SwalPreset.success('Operation Success').then(() => {
  // onClose
})

SwalPreset.info('Information').then(() => {
  // onClose
})

SwalPreset.warning('Warning').then(() => {
  // onClose
})

SwalPreset.error('Error Occurred').then(() => {
  // onClose
})

SwalPreset.confirm('Are You Sure?').then(() => {
  // onConfirmed
}).catch((e) => {
  if (e.isDenied) {
    // onDenied
  } else if (e.isDismissed) {
    // onDismissed
  }
})

Example: Coercive Confirm

No cancel, must confirm.

SwalPreset.confirm({
  titleText: 'Confirm to continue',
  showCancelButton: false,
  allowOutsideClick: false,
  allowEscapeKey: false,
})

Example: Complex Confirm

// form with async submitting
SwalPreset.confirm({
  input: 'text',
  inputAttributes: {
    placeholder: 'Remark'
  },
  confirmButtonText: 'Agree',
  showLoaderOnConfirm: true,
  preConfirm: (input) => {
    return new Promise((resolve) => {
      setTimeout(resolve, 500)
    }).then(() => {
      alert('Agree Success')
    }).catch((e) => {
      alert('Agree Failed')
    })
  },
  showDenyButton: true,
  denyButtonText: 'Deny',
  returnInputValueOnDeny: true,
  preDeny: (input) => {
    if (input) {
      return new Promise((resolve, reject) => {
        setTimeout(reject, 500)
      }).then(() => {
        alert('Deny Success')
      }).catch((e) => {
        alert('Deny Failed')
      })
    } else {
      Swal.showValidationMessage('Please fill in the remark')
      return false
    }
  },
}).then((e) => {
  alert('Agreed')
}).catch((e) => {
  if (e.isDenied) {
    alert('Denied')
  } else if (e.isDismissed) {
    alert('Dismissed')
  }
})