{"id":13466418,"url":"https://github.com/Basaingeal/Razor.SweetAlert2","last_synced_at":"2025-03-25T21:32:12.718Z","repository":{"id":34928174,"uuid":"191960073","full_name":"Basaingeal/Razor.SweetAlert2","owner":"Basaingeal","description":"A Razor class library for interacting with SweetAlert2","archived":false,"fork":false,"pushed_at":"2025-03-24T07:19:23.000Z","size":11595,"stargazers_count":209,"open_issues_count":20,"forks_count":21,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-03-24T08:30:39.180Z","etag":null,"topics":["alert","blazor","confirm","confirmation-dialog","dialog","dotnet","hacktoberfest","library","notifications","popup","prompt","razor","razor-components","sweetalert","sweetalert2","toast"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Basaingeal.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-14T14:49:22.000Z","updated_at":"2025-03-24T07:18:01.000Z","dependencies_parsed_at":"2024-08-28T08:46:23.981Z","dependency_job_id":"7c93bdbb-c3b8-409a-ba8c-fbced768f0e1","html_url":"https://github.com/Basaingeal/Razor.SweetAlert2","commit_stats":{"total_commits":2045,"total_committers":7,"mean_commits":"292.14285714285717","dds":0.5378973105134475,"last_synced_commit":"3033fc12a44c034623c0878b7dcc230157ac415a"},"previous_names":[],"tags_count":109,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Basaingeal%2FRazor.SweetAlert2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Basaingeal%2FRazor.SweetAlert2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Basaingeal%2FRazor.SweetAlert2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Basaingeal%2FRazor.SweetAlert2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Basaingeal","download_url":"https://codeload.github.com/Basaingeal/Razor.SweetAlert2/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245238642,"owners_count":20582924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","blazor","confirm","confirmation-dialog","dialog","dotnet","hacktoberfest","library","notifications","popup","prompt","razor","razor-components","sweetalert","sweetalert2","toast"],"created_at":"2024-07-31T15:00:43.888Z","updated_at":"2025-03-25T21:32:12.240Z","avatar_url":"https://github.com/Basaingeal.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Components","2D/3D Rendering engines"],"readme":"# CurrieTechnologies.Razor.SweetAlert2\n\n| |\n| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| ![Blazor](BrandBlazor_nohalo_140x.png) \u003cbr/\u003e āž• \u003cbr/\u003e ![SweetAlert2](https://raw.github.com/sweetalert2/sweetalert2/master/assets/swal2-logo.png) \u003cbr/\u003e A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. \u003cbr/\u003e All wrapped inside a Razor Component Library for use in Blazor Server and WebAssembly applications. \u003cbr/\u003e ![SweetAlert2 in action](https://raw.github.com/sweetalert2/sweetalert2/master/assets/sweetalert2.gif) \u003cbr/\u003e [See SweetAlert2 in action ā†—](https://sweetalert2.github.io/) |\n\n| Master | Develop | Version | Downloads | Mergify |\n| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: |\n| [![Build Status](https://dev.azure.com/michaeljcurrie136/CurrieTechnologies.Blazor/_apis/build/status/Basaingeal.Razor.SweetAlert2?branchName=master)](https://dev.azure.com/michaeljcurrie136/CurrieTechnologies.Blazor/_build/latest?definitionId=16\u0026branchName=master) | [![Build Status](https://dev.azure.com/michaeljcurrie136/CurrieTechnologies.Blazor/_apis/build/status/Basaingeal.Razor.SweetAlert2?branchName=develop)](https://dev.azure.com/michaeljcurrie136/CurrieTechnologies.Blazor/_build/latest?definitionId=16\u0026branchName=develop) | ![Nuget](https://img.shields.io/nuget/v/CurrieTechnologies.Razor.SweetAlert2.svg?style=popout) | ![Nuget](https://img.shields.io/nuget/dt/CurrieTechnologies.Razor.SweetAlert2) | [![mergify-status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/Basaingeal/Razor.SweetAlert2\u0026style=popout)](https://mergify.io) |\n\nšŸ‘‰ **Upgrading from v3.x to v4.x?** [Read the release notes!](https://github.com/Basaingeal/Razor.SweetAlert2/releases/tag/v4.0.0)\n\nšŸ‘‰ **Upgrading from v4.x to v5.x?** [Read the release notes!](https://github.com/Basaingeal/Razor.SweetAlert2/releases/tag/v5.0.0)\n\n## This package is for both Blazor Server Apps and Blazor WebAssembly Apps. It should be used instead of [`CurrieTechnologies.Blazor.SweetAlert2`](https://github.com/Basaingeal/Blazor.SweetAlert2) which is now deprecated.\n\n### šŸ™Œ Includes themes from the [Official SweetAlert2 Themes project](https://github.com/sweetalert2/sweetalert2-themes) šŸ™Œ\n\n## Installation\n\n```sh\nInstall-Package CurrieTechnologies.Razor.SweetAlert2\n```\n\nOr install from the NuGet Package Manager\n\n## Usage\n\n### Register the service in your Startup file.\n\n```csharp\n// Startup.cs\npublic void ConfigureServices(IServiceCollection services)\n{\n...\n services.AddSweetAlert2();\n...\n}\n```\n\n**NB:** For newer .NET 6 minimal project templates, this will actually be in `Program.cs`\n\n```csharp\n// Program.cs\n...\nbuilder.Services.AddSweetAlert2();\n```\n\n### OR\n\nIf you want to use one of the Official SweetAlert2 themes:\n\n```csharp\n// Startup.cs\npublic void ConfigureServices(IServiceCollection services)\n{\n...\n services.AddSweetAlert2(options =\u003e {\n options.Theme = SweetAlertTheme.Dark;\n });\n...\n}\n```\n\n_See [Configuration](#configuration) for more information._\n\n### Add the script tag\n\nAdd this script tag in your root html file (Likely \\_Host.cshtml for Blazor Server or index.html for Blazor WebAssembly), right under the framework script tag. (i.e `\u003cscript src=\"_framework/blazor.server.js\"\u003e\u003c/script\u003e` for Blazor Server or `\u003cscript src=\"_framework/blazor.webassembly.js\"\u003e\u003c/script\u003e` for Blazor WebAssembly)\n\n**NB:** In newer templates, this will be towards the bottom of `Pages/_Layout.cshtml` for Blazor Server or `wwwroot/index.html` for Blazor WebAssembly.\n\n```html\n\u003cscript src=\"_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js\"\u003e\u003c/script\u003e\n```\n\n**If you need to support IE11, this script tag is different. See [IE Compatibility](#ie-compatibility).**\n\n### \\_Imports.razor\n\n_Recommended:_ Add `@using CurrieTechnologies.Razor.SweetAlert2` to your `_Imports.razor` file, to avoid having to put the using call in every component that requires it.\n\n### Inject the SweetAlertService into any Blazor component.\n\n```razor\n// Sample.razor\n@inject SweetAlertService Swal;\n\u003cbutton class=\"btn btn-primary\"\n @onclick=\"@(async () =\u003e await Swal.FireAsync(\"Any fool can use a computer\"))\"\u003e\n Try me!\n\u003c/button\u003e\n```\n\n## Examples\n\nThe most basic message:\n\n```csharp\nawait Swal.FireAsync(\"Hello world!\");\n```\n\nA message signaling an error:\n\n```csharp\nawait Swal.FireAsync(\"Oops...\", \"Something went wrong!\", \"error\");\n```\n\nHandling the result of SweetAlert2 modal:\n\n```csharp\n// async/await\nSweetAlertResult result = await Swal.FireAsync(new SweetAlertOptions\n {\n Title = \"Are you sure?\",\n Text = \"You will not be able to recover this imaginary file!\",\n Icon = SweetAlertIcon.Warning,\n ShowCancelButton = true,\n ConfirmButtonText = \"Yes, delete it!\",\n CancelButtonText = \"No, keep it\"\n });\n\nif (!string.IsNullOrEmpty(result.Value))\n{\n await Swal.FireAsync(\n \"Deleted\",\n \"Your imaginary file has been deleted.\",\n SweetAlertIcon.Success\n );\n}\nelse if (result.Dismiss == DismissReason.Cancel)\n{\n await Swal.FireAsync(\n \"Cancelled\",\n \"Your imaginary file is safe :)\",\n SweetAlertIcon.Error\n );\n}\n\n// Promise/Task based\nSwal.FireAsync(new SweetAlertOptions\n {\n Title = \"Are you sure?\",\n Text = \"You will not be able to recover this imaginary file!\",\n Icon = SweetAlertIcon.Warning,\n ShowCancelButton = true,\n ConfirmButtonText = \"Yes, delete it!\",\n CancelButtonText = \"No, keep it\"\n }).ContinueWith(swalTask =\u003e\n {\n SweetAlertResult result = swalTask.Result;\n if (!string.IsNullOrEmpty(result.Value))\n {\n Swal.FireAsync(\n \"Deleted\",\n \"Your imaginary file has been deleted.\",\n SweetAlertIcon.Success\n );\n }\n else if (result.Dismiss == DismissReason.Cancel)\n {\n Swal.FireAsync(\n \"Cancelled\",\n \"Your imaginary file is safe :)\",\n SweetAlertIcon.Error\n );\n }\n });\n```\n\n### [More examples can be found on the SweetAlert2 project site](https://sweetalert2.github.io/)\n\n## Configuration\n\nIn `Startup.cs` you have the opportunity to configure how `sweetalert2` will behave in your application.\n\n### Theme\n\nWith `SweetAlertServiceOptions.Theme` you can specify one of the official sweetalert2 themes to apply to your modal throughout your application.\n\n#### SetThemeForColorSchemePreference()\n\nWith the `SweetAlertServiceOptions.SetThemeForColorSchemePreference()` method, you can specify which theme the user uses, based on the result of their `prefers-color-scheme` CSS media query. Most commonly this can be used to help create a dark version of your application, based on user preference. Browsers that do not support the `prefers-color-scheme` media query will fall back to the theme specified in `SweetAlertServiceOptions.Theme`\n\n#### Theme Examples\n\nIf you want the default theme by default, and the dark theme if the user prefers a dark color scheme:\n\n```csharp\nservices.AddSweetAlert2(options =\u003e {\n options.SetThemeForColorSchemePreference(ColorScheme.Dark, SweetAlertTheme.Dark);\n});\n```\n\nA dark theme by default, and a lighter theme if the user prefers a light color scheme:\n\n```csharp\nservices.AddSweetAlert2(options =\u003e {\n options.Theme = SweetAlertTheme.Dark;\n options.SetThemeForColorSchemePreference(ColorScheme.Light, SweetAlertTheme.Bootstrap4);\n});\n```\n\nA minimal theme as a fallback, and a dark/light theme to match user preference:\n\n```csharp\nservices.AddSweetAlert2(options =\u003e {\n options.Theme = SweetAlertTheme.Minimal;\n options.SetThemeForColorSchemePreference(ColorScheme.Light, SweetAlertTheme.Default);\n options.SetThemeForColorSchemePreference(ColorScheme.Dark, SweetAlertTheme.Dark);\n});\n```\n\n_See [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) for more information._\n\n### Default Settings\n\nIf you want some settings globally applied to all of your SweetAlert2 dialogs, configure your default settings in `Startup.cs`\n\n```csharp\nservices.AddSweetAlert2(options =\u003e {\n options.DefaultOptions = new SweetAlertOptions {\n HeightAuto = false\n };\n});\n```\n\nThese can be overriden in individual `FireAsync()` calls.\n\n**NB:** This will only apply to `FireAsync()` calls that take a `SweetAlertOptions` object as a parameter. The methods that take in primitive types bypass `SweetAlertOptions` entirely on both the C# and JS libraries.\n\n## Notable differences from the JavaScript library\n\n- No methods that return an HTMLElement are included (e. g. `Swal.getHtmlContainer()`)\n- The value of a `SweetAlertResult` (`result.Value`) can only be a string. Numbers and booleans must be converted. Object must be parsed to/from JSON in your code.\n- `DidOpenAsync()`, `WillCloseAsync()`, `WillOpenAsync()`, and `DidCloseAsync()` can all take asynchronous callbacks. šŸŽ‰ (none will return an HTMLElement though.)\n- No support for `\u003coptgroup\u003e` in the select input type.\n- No async option for `InputOptions` or `InputValue`\n- 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:\n\n```csharp\nnew SweetAlertOptions {\n ...\n InputValidator = new InputValidatorCallback((string input) =\u003e input.Length == 0 ? \"Please provide a value\" : null, this),\n ...\n}\n```\n\n`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.\nThese 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 `EventCallback`s only return generic `Task`s.\n\n## Browser compatibility\n\n| IE11\\* | Edge | Chrome | Firefox | Safari | Opera | UC Browser |\n| ------ | ---- | ------ | ------- | ------ | ----- | ---------- |\n| āŒ | āœ” | āœ” | āœ” | āœ” | āœ” | āœ” |\n\n### IE Compatibility\\*\n\nIE Compatibility has been removed in `v5` due to `sweetalert2@11` dropping their support for it.\n\nIf you need to support IE11, use `v4` or earlier, and use this script tag instead. (file size is about 35% larger)\n\n```html\n\u003cscript src=\"_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.ieCompat.min.js\"\u003e\u003c/script\u003e\n```\n\nYou will also likely need to utilize the [Blazor.Polyfill](https://github.com/Daddoon/Blazor.Polyfill) library, for general Blazor functionality in IE.\n\n## Protestware\n\nCurrently, the original `sweetalert2` library contains protestware to disable Russian websites using `sweetalert2` when visited by Russian-speaking users. This wrapper library bypasses the effects of that protestware, so there should be no undesired effects when using this library.\n\n## Related projects\n\n- [SweetAlert2](https://sweetalert2.github.io/) - Original SweetAlert2 project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBasaingeal%2FRazor.SweetAlert2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBasaingeal%2FRazor.SweetAlert2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBasaingeal%2FRazor.SweetAlert2/lists"}