SweetAlert 2 (v7.0.9) for Meteor

Wrapper for SweetAlert Meteor original npm package: https://github.com/limonte/sweetalert2

---

:point_right: Upgrading from v6.x to v7.x? Read the release notes!

:point_right: Migrating from SweetAlert? SweetAlert 1.x to SweetAlert2 migration guide

---

Install

meteor add cleandersonlobo:sweetalert2

Examples

The most basic message:

swal('Hello world!')

A message signaling an error:

swal('Oops...', 'Something went wrong!', 'error')

Handling the result of SweetAlert2 modal:

swal({
  title: 'Are you sure?',
  text: 'You will not be able to recover this imaginary file!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keep it'
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your imaginary file has been deleted.',
      'success'
    )
  // result.dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
  } else if (result.dismiss === 'cancel') {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

View more examples

Handling Dismissals

When an alert is dismissed by the user, the Promise returned by swal() will be resolved with an object {dismiss: reason} documenting the reason it was dismissed:

| String | Description | Related configuration | | ----------- | ------------------------------------------------------- | --------------------- | | 'overlay' | The user clicked the overlay. | allowOutsideClick | | 'cancel' | The user clicked the cancel button. | showCancelButton | | 'close' | The user clicked the close button. | showCloseButton | | 'esc' | The user pressed the <kbd>Esc</kbd> key. | allowEscapeKey | | 'timer' | The timer ran out, and the alert closed automatically. | timer |

Modal Types

| success | error | warning | info | question | | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | | | | | |

Configuration

| Argument | Default value | Description | | ------------------------ | --------------------- | ----------- | | title | null | The title of the modal, as HTML. It can either be added to the object under the key "title" or passed as the first parameter of the function. | | titleText             | null | The title of the modal, as text. Useful to avoid HTML injection. | | text                 | null               | A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function. | | html | null | A HTML description for the modal. If text and html parameters are provided in the same time, "text" will be used. | | type | null | The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info and question. It can either be put in the array under the key type or passed as the third parameter of the function. | | backdrop | true | Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop | toast | false | Whether or not an alert should be treated as a toast notification. This option is normally coupled with the position parameter and a timer. Toasts are NEVER autofocused. | target | 'body' | The container element for adding modal into. | | input | null | Input field type, can be 'text', 'email', 'password', 'number', 'tel', 'range', 'textarea', 'select', 'radio', 'checkbox', 'file' and 'url'. | | width | '500px' | Modal window width, including paddings (box-sizing: border-box). Can be in px or %. | | padding | 20 | Modal window padding. | | background | '#fff' | Modal window background (CSS background property). | | position | 'center' | Modal window position, can be 'top', 'top-left', 'top-right', 'center', 'center-left', 'center-right', 'bottom', 'bottom-left', or 'bottom-right'. | | grow | false | Paired with window position, sets the direction the modal should grow in, can be set to 'row', 'column', 'fullscreen', or false. | | customClass | null | A custom CSS class for the modal. | | timer | null | Auto close timer of the modal. Set in ms (milliseconds). | | animation | true | If set to false, modal CSS animation will be disabled. | | allowOutsideClick | true | If set to false, the user can't dismiss the modal by clicking outside it. | | allowEscapeKey | true | If set to false, the user can't dismiss the modal by pressing the <kbd>Esc</kbd> key. | | allowEnterKey | true | If set to false, the user can't confirm the modal by pressing the <kbd>Enter</kbd> or <kbd>Space</kbd> keys, unless they manually focus the confirm button. | | showConfirmButton | true | If set to false, a "Confirm"-button will not be shown. It can be useful when you're using html parameter for custom HTML description. | | showCancelButton | false | If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal. | | confirmButtonText | 'OK' | Use this to change the text on the "Confirm"-button. | | cancelButtonText | 'Cancel' | Use this to change the text on the "Cancel"-button. | | confirmButtonColor | '#3085d6' | Use this to change the background color of the "Confirm"-button (must be a HEX value). | | cancelButtonColor | '#aaa' | Use this to change the background color of the "Cancel"-button (must be a HEX value). | | confirmButtonClass | null | A custom CSS class for the "Confirm"-button. | | cancelButtonClass | null | A custom CSS class for the "Cancel"-button. | | confirmButtonAriaLabel | '' | Use this to change the aria-label for the "Confirm"-button. | | cancelButtonAriaLabel | '' | Use this to change the aria-label for the "Cancel"-button. | | buttonsStyling | true | Apply default styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false. | | reverseButtons | false | Set to true if you want to invert default buttons positions ("Confirm"-button on the right side). | | focusConfirm | true | Set to false if you want to focus the first element in tab order instead of "Confirm"-button by default. | | focusCancel | false | Set to true if you want to focus the "Cancel"-button by default. | | showCloseButton | false | Set to true to show close button in top right corner of the modal. | | closeButtonAriaLabel | 'Close this dialog' | Use this to change the aria-label for the close button. | | showLoaderOnConfirm | false | Set to true to disable buttons and show that something is loading. Use it in combination with the preConfirm parameter. | | preConfirm | null | Function to execute before confirm, may be async (Promise-returning) or sync, see <a href="https://limonte.github.io/sweetalert2/#ajax-request">usage example</a>. | | imageUrl | null | Add an image for the modal. Should contain a string with the path or URL to the image. | | imageWidth | null | If imageUrl is set, you can specify imageWidth to describes image width in px. | | imageHeight | null | Custom image height in px. | | imageAlt | '' | An alternative text for the custom image icon. | | imageClass | null