CurrieTechnologies.Blazor.SweetAlert2 0.2.1-preview

<p align="center"> <span style="font-size:x-large">Client-side Blazor</span> <br> + <br> <a href="https://sweetalert2.github.io/"> <img src="https://raw.github.com/sweetalert2/sweetalert2/master/assets/swal2-logo.png" alt="SweetAlert2"> </a> </p>

<p align="center"> A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. </p>

<p align="center"> <a href="https://sweetalert2.github.io/"> <img src="https://raw.github.com/sweetalert2/sweetalert2/master/assets/sweetalert2.gif" width="562"><br> See SweetAlert2 in action ↗ </a> </p>

This package is for Client-side Blazor only. For Server-side Blazor use CurrieTechnologies.Razor.SweetAlert2

🙌 Includes themes from the Official SweetAlert2 Themes project 🙌

Installation

Install-Package CurrieTechnologies.Blazor.SweetAlert2 --IncludePrerelease

Or grab from Nuget

Usage

Register the service in your Startup file.

// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
	services.AddSweetAlert2();
...
}

OR

If you want to use one of the Official SweetAlert2 themes

// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
	services.AddSweetAlert2(options => {
		options.Theme = SweetAlertTheme.Dark;
	});
...
}

Inject the SweetAlertService into any Blazor component

// Sample.razor
@inject SweetAlertService Swal;
<button class="btn btn-primary"
		@onclick="@(async () => await Swal.FireAsync("Any fool can use a computer"))">
	Try me!
</button>

Examples

The most basic message:

await Swal.FireAsync("Hello world!");

A message signaling an error:

await Swal.FireAsync("Oops...", "Something went wrong!", "error");

Handling the result of SweetAlert2 modal:

// async/await
SweetAlertResult result = await Swal.FireAsync(new SweetAlertOptions
	{
		Title = "Are you sure?",
		Text = "You will not be able to recover this imaginary file!",
		Type = SweetAlertType.Warning,
		ShowCancelButton = true,
		ConfirmButtonText = "Yes, delete it!",
		CancelButtonText = "No, keep it"
	});

if (!string.IsNullOrEmpty(result.Value))
{
	await Swal.FireAsync(
		"Deleted",
		"Your imaginary file has been deleted.",
		SweetAlertType.Success
		);
}
else if (result.Dismiss == DismissReason.Cancel)
{
	await Swal.FireAsync(
		"Cancelled",
		"Your imaginary file is safe :)",
		SweetAlertType.Error
		);
}

// Promise/Task based
Swal.FireAsync(new SweetAlertOptions
	{
		Title = "Are you sure?",
		Text = "You will not be able to recover this imaginary file!",
		Type = SweetAlertType.Warning,
		ShowCancelButton = true,
		ConfirmButtonText = "Yes, delete it!",
		CancelButtonText = "No, keep it"
	}).ContinueWith(swalTask => 
	{
		SweetAlertResult result = swalTask.Result;
		if (!string.IsNullOrEmpty(result.Value))
		{
			Swal.FireAsync(
				"Deleted",
				"Your imaginary file has been deleted.",
				SweetAlertType.Success
				);
		}
		else if (result.Dismiss == DismissReason.Cancel)
		{
			Swal.FireAsync(
				"Cancelled",
				"Your imaginary file is safe :)",
				SweetAlertType.Error
				);
		}
	});

More examples can be found on the SweetAlert2 project site

Notable differences from the JavaScript library

• No methods that return an HTMLElement are included (e. g. Swal.getContainer())
• The value of a SweetAlertResult (result.Value) can only be a string (or a collection of strings if returned from a queue request). Numbers and booleans must be converted. Object must be parsed to/from JSON in your code.
• OnOpenAsync(), OnCloseAsync(), OnBeforeOpenAsync(), and OnAfterCloseAsync() can all take asynchronous callbacks. 🎉 (none will return an HTMLElement though.)
• All SweetAlert2 non-Promise returning methods are available through synchronous or asynchronous methods. (e.g. Swal.ShowLoading() and Swal.ShowLoadingAsync())
• Callbacks must be passed inside of objects specifically designed for the given callback property. e.g. the InputValidator property takes an InputValidatorCallback created like so:

new SweetAlertOptions {
	...
	InputValidator = new InputValidatorCallback((string input) => input.Length == 0 ? "Please provide a value" : null, this),
	...
}

this is passed in so that the Blazor EventCallback used behind the scenes can trigger a re-render if the state of the calling component was changed in the callback. If the callback does not require the calling component to re-render, passing in this is optional. These callbacks are necessary because there is currently no way to create an EventCallback in Blazor that isn't a component parameter without using the EventCallbackFactory which is clunky. It also allows the callback to return a value that can be used by the SweetAlert2 library. (e.g. A validation message to show if input validation fails.) Native Blazor EventCallbacks only return generic Tasks.

Browser compatibility

Compatible with all browsers than can run WebAssembly and Blazor.

Related projects

• SweetAlert2 - Original SweetAlert2 project