showLoaderOnConfirm is no longer necessary.

Instead, you can set the closeModal parameter in the button options.

closeOnConfirm and closeOnCancel are no longer used.

Otherwise, you can specify a class in the button object. As a useful shorthand, you can set dangerMode: true to make the confirm button red. Instead, you should specify all stylistic changes through CSS. Instead, you can set button: 'foo' to set the text on the confirm button to 'foo', or buttons: to set the text on the cancel button to 'foo' and the text on the confirm button to 'bar'.

confirmButtonText and cancelButtonText are no longer needed.By default, only the confirm button is shown. Instead, you can set buttons: true to show both buttons, or buttons: false to hide all buttons. showCancelButton and showConfirmButton are no longer needed.If you have a special use case, you can give your modal a custom class. Instead, you should specify dimension restrictions in CSS if necessary. If you're using the shorthand version ( swal('Hi', 'Hello world', 'warning')) you don't have to change anything. type and imageUrl have been replaced with a single icon option.swal('Hello world!')), that parameter will be the modal's text instead of its title. When using a single string parameter (e.g.js-file).īelow are some additional deprecated options along with their replacements: The most important change is that callback functions have been deprecated in favour of promises, and that you no longer have to import any external CSS file (since the styles are now bundled in the. SweetAlert 2.0 introduces some important breaking changes in order to make the library easier to use and more flexible. Whenever you want to use JSX in your SweetAlert modal, simply import swal from instead of from sweetalert.

Note that you need to have both sweetalert and as dependencies in your package.json.Īfter that, it's easy. In order to use SweetAlert with JSX syntax, you need to install SweetAlert with React. That's why we've also made it easy to integrate your favourite template library into SweetAlert, using the SweetAlert Transformer. While the method documented above for creating more advanced modal designs works, it gets quite tedious to manually create nested DOM nodes. Using this technique, we can create modals with more interactive UIs, such as this one from Facebook. The rest is just basic React and JavaScript. The only code that's specific to SweetAlert is the tActionValue() and the swal() call at the end. We then extract its DOM node and pass it into under the swal function's content option to render it as an unstyled element. All we're doing is creating an input tag as a React component.

This might look very complex at first, but it's actually pretty simple.

Swat 4 demo