{"id":15092971,"url":"https://github.com/blazored/toast","last_synced_at":"2025-05-14T20:06:04.036Z","repository":{"id":43808252,"uuid":"166607211","full_name":"Blazored/Toast","owner":"Blazored","description":"A JavaScript free toast library for Blazor and Razor Component applications","archived":false,"fork":false,"pushed_at":"2024-05-03T11:47:03.000Z","size":7387,"stargazers_count":683,"open_issues_count":22,"forks_count":98,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-04-14T22:09:51.548Z","etag":null,"topics":["blazor","blazor-server","blazor-webassembly","blazored","csharp","hacktoberfest","javascript-free-toast","nuget","razor","razor-components","toast","toast-message","toast-notifications","toast-ui"],"latest_commit_sha":null,"homepage":"https://blazored.github.io/Toast/","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/Blazored.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["chrissainty"]}},"created_at":"2019-01-20T00:15:35.000Z","updated_at":"2025-04-12T07:04:35.000Z","dependencies_parsed_at":"2024-04-10T02:56:06.880Z","dependency_job_id":"46b9f204-5274-4bca-8c2b-507113e4c883","html_url":"https://github.com/Blazored/Toast","commit_stats":{"total_commits":138,"total_committers":30,"mean_commits":4.6,"dds":0.5797101449275363,"last_synced_commit":"6e2959ab7be698a47d69825a4cadb6fd0e11159d"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FToast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FToast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FToast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FToast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blazored","download_url":"https://codeload.github.com/Blazored/Toast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968914,"owners_count":21191162,"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":["blazor","blazor-server","blazor-webassembly","blazored","csharp","hacktoberfest","javascript-free-toast","nuget","razor","razor-components","toast","toast-message","toast-notifications","toast-ui"],"created_at":"2024-09-25T11:02:21.711Z","updated_at":"2025-04-14T22:09:54.353Z","avatar_url":"https://github.com/Blazored.png","language":"C#","funding_links":["https://github.com/sponsors/chrissainty"],"categories":[],"sub_categories":[],"readme":"# Blazored Toast\nThis is a JavaScript free toast implementation for [Blazor](https://blazor.net) and Razor Components applications. It supports icons that are either specified by class name (such as fontawesome) or by a specified element (Material Design).\n\n[![Nuget version](https://img.shields.io/nuget/v/Blazored.Toast.svg?logo=nuget)](https://www.nuget.org/packages/Blazored.Toast/)\n[![Nuget downloads](https://img.shields.io/nuget/dt/Blazored.Toast?logo=nuget)](https://www.nuget.org/packages/Blazored.Toast/)\n![Build \u0026 Test Main](https://github.com/Blazored/Toast/workflows/Build%20\u0026%20Test%20Main/badge.svg)\n\n![Screenshot of component in action](screenshot.png)\n\n## Installing\n\nTo install the package add the following line to you csproj file replacing x.x.x with the latest version number (found at the top of this file):\n\n```\n\u003cPackageReference Include=\"Blazored.Toast\" Version=\"x.x.x\" /\u003e\n```\n\nYou can also install via the .NET CLI with the following command:\n\n```\ndotnet add package Blazored.Toast\n```\n\nIf you're using Visual Studio or JetBrains Rider you can also install via the built in NuGet package manager.\n\n## Setup\n\nYou will need to register the Blazored Toast service with the service collection in your _Program.cs_ file.\n\n```c#\nbuilder.Services.AddBlazoredToast();\n```\n\n### Add Imports\nAdd the following to your *_Imports.razor*\n\n```razor\n@using Blazored.Toast\n@using Blazored.Toast.Services\n```\n\n### Add reference to style sheet(s)\nBlazored Toast uses CSS isolation. If your application is already using CSS isolation then the styles for Toast will be included automatically and you can skip this step. However, if your application isn't using isolated CSS, you will need to add a reference to the CSS bundle. You can checkout the [Microsoft Docs](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0#css-isolation-bundling) for additional details.\n\n```razor\n\u003clink href=\"{YOUR APP ASSEMBLY NAME}.styles.css\" rel=\"stylesheet\"\u003e\n```\n\nPresumably, if you want to use the Material Icons your project already includes some form of the icons. If not see [Material Design Icons](https://dev.materialdesignicons.com/getting-started/webfont) for the available alternatives.\n\n### Register and Configure Toasts Component\nAdd the `\u003cBlazoredToasts /\u003e` tag into your applications *MainLayout.razor*.\n\nToasts are configured using parameters on the `\u003cBlazoredToasts /\u003e` component. The following options are available.\n\n- IconType (Default: `IconType.Blazored`)\n- InfoClass\n- InfoIcon\n- SuccessClass\n- SuccessIcon\n- WarningClass\n- WarningIcon\n- ErrorClass\n- ErrorIcon\n- Position (Default: `ToastPosition.TopRight`)\n- Timeout (Default: 5)\n- MaxToastCount (Default: `int.MaxValue`)\n- RemoveToastsOnNavigation\n- ShowProgressBar\n- CloseButtonContent (provide custom close button)\n- ShowCloseButton (Default: `true`)\n- DisableTimeout\n- PauseProgressOnHover (Default: `false`)\n- ExtendedTimeout\n\nBy default, you don't need to provide any settings everything will just work. But if you want to add icons to toasts or override the default styling then you can use the options above to do that. \n\nFor example, to add an icon from Font Awesome to all success toasts you can do the following:\n\n```razor\n\u003cBlazoredToasts IconType=\"IconType.FontAwesome\" SuccessIcon=\"fa fa-thumbs-up\"/\u003e\n```\n\nSetting the position also requires a reference to `Blazored.Toast.Configuration`, for example:\n\n```razor\n@using Blazored.Toast.Configuration\n\n\u003cBlazoredToasts Position=\"ToastPosition.BottomRight\"\n                Timeout=\"10\"\n                IconType=\"IconType.FontAwesome\"\n                SuccessClass=\"success-toast-override\"\n                SuccessIcon=\"fa fa-thumbs-up\"\n                ErrorIcon=\"fa fa-bug\" /\u003e\n```\n\nIf you want to have your own custom close button, that can be configured via the `CloseButtonContent` parameter:\n```razor\n\u003cBlazoredToasts Position=\"ToastPosition.BottomRight\"\n                Timeout=\"10\"\u003e\n    \u003cCloseButtonContent\u003e\n        \u003cdiv\u003e\n            \u003cspan\u003e\u0026times;\u003c/span\u003e\n        \u003c/div\u003e\n    \u003c/CloseButtonContent\u003e\n\u003c/BlazoredToasts\u003e\n```\n\n## Usage\nIn order to show a toast you have to inject the `IToastService` into the component or service you want to trigger a toast. You can then call one of the following methods depending on what kind of toast you want to display, passing in a message and an optional heading.\n\n- `ShowInfo`\n- `ShowSuccess`\n- `ShowWarning`\n- `ShowError`\n\n\n```razor\n@page \"/toastdemo\"\n@inject IToastService toastService\n\n\u003ch1\u003eToast Demo\u003c/h1\u003e\n\nTo show a toast just click one of the buttons below.\n\n\u003cbutton class=\"btn btn-info\" @onclick=\"@(() =\u003e toastService.ShowInfo(\"I'm an INFO message\"))\"\u003eInfo Toast\u003c/button\u003e\n\u003cbutton class=\"btn btn-success\" @onclick=\"@(() =\u003e toastService.ShowSuccess(\"I'm a SUCCESS message with a custom title\"))\"\u003eSuccess Toast\u003c/button\u003e\n\u003cbutton class=\"btn btn-warning\" @onclick=\"@(() =\u003e toastService.ShowWarning(\"I'm a WARNING message\"))\"\u003eWarning Toast\u003c/button\u003e\n\u003cbutton class=\"btn btn-danger\" @onclick=\"@(() =\u003e toastService.ShowError(\"I'm an ERROR message\"))\"\u003eError Toast\u003c/button\u003e\n```\n\n### Show Progress Bar\nYou can display a progress bar which gives a visual indicator of the time remaining before the toast will disappear. In order to show the progress bar set the `ShowProgressBar` parameter to true.\n\n```razor\n\u003cBlazoredToasts Position=\"ToastPosition.BottomRight\"\n                Timeout=\"10\"\n                ShowProgressBar=\"true\" /\u003e\n```\n\n### Remove Toasts When Navigating\nIf you wish to clear any visible toasts when the user navigates to a new page you can enable the `RemoveToastsOnNavigation` parameter. Setting this to true will remove any visible toasts whenever the `LocationChanged` event fires.\n\n### Limiting number of toasts shown at once\nIf you want to limit the number of toasts displayed at any given time, you can set the `MaxToastCount` parameter. For example, if the value is set to *3* only three toast instances will be displayed. Any additional toasts that are triggered will be held in a queue and will be displayed as older toasts time out.\n\n### Custom Component\nYou can call the `ShowToast` method passing the type of component you want the toast to display.\n\nFor example if I have a component called `MyToast` which I want to display in the toast and I want to call it from the `Index` component on a button click.\n\n```razor\n@page \"/toastdemo\"\n@inject IToastService toastService\n\n\u003ch1\u003eCustom Toast Demo\u003c/h1\u003e\n\n\u003cbutton class=\"btn btn-primary\" @onclick=\"@(() =\u003e toastService.ShowToast\u003cMyToast\u003e())\"\u003eCustom Toast\u003c/button\u003e\n```\n\n### Passing Parameters\nIf you want to pass values to the component you're displaying in the toast, then you can use the `ToastParameters` object. The name you provide must match the name of a parameter defined on the component being displayed.\n\n```razor\n@page \"/toastdemo\"\n@inject IToastService toastService\n\n\u003ch1\u003eCustom Toast Demo\u003c/h1\u003e\n\n\u003cbutton class=\"btn btn-primary\" @onclick=\"@(() =\u003e toastService.ShowToast\u003cMyToast\u003e(_toastParameters))\"\u003eCustom Toast with parameters\u003c/button\u003e\n\n@code\n{\n    private ToastParameters _toastParameters;\n\n    protected override void OnInitialized()\n    {\n        _toastParameters = new ToastParameters();\n        _toastParameters.Add(nameof(MyToast.Heading), \"MyToast heading\");\n        _toastParameters.Add(nameof(MyToast.Message), \"MyToast message\");\n    }\n}\n```\n### Custom Component Options\nCustom toast components can be customized. These settings can be set globally or changed programatically on a per toast basis. This is achieved using the `ToastInstanceSettings` class.\nThe following settings are available.\n- `Timeout`\n- `ShowProgressBar`\n\nFor Example if you want to change the duration of the timeout and disable the progress bar.\n\n```razor\n@page \"/toastdemo\"\n@inject IToastService toastService\n\n\u003ch1\u003eCustom Toast Demo\u003c/h1\u003e\n\n\u003cbutton class=\"btn btn-primary\" @onclick=\"@(() =\u003e toastService.ShowToast\u003cMyToast\u003e(new ToastInstanceSettings(5, false)))\"\u003eCustom Toast\u003c/button\u003e\n```\n\nFull examples for Blazor WebAssembly and Blazor Interactive Server are included in the [samples](https://github.com/Blazored/Toast/tree/main/samples).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazored%2Ftoast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblazored%2Ftoast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazored%2Ftoast/lists"}