{"id":26280106,"url":"https://github.com/kristofferstrube/blazor.confetti","last_synced_at":"2026-01-02T12:18:50.353Z","repository":{"id":221981798,"uuid":"755941535","full_name":"KristofferStrube/Blazor.Confetti","owner":"KristofferStrube","description":"A small service that can make confetti in your Blazor application.","archived":false,"fork":false,"pushed_at":"2024-08-04T09:58:27.000Z","size":24822,"stargazers_count":12,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-11T01:45:19.844Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/KristofferStrube.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2024-02-11T14:35:32.000Z","updated_at":"2025-02-22T11:39:47.000Z","dependencies_parsed_at":"2024-08-04T10:59:45.010Z","dependency_job_id":null,"html_url":"https://github.com/KristofferStrube/Blazor.Confetti","commit_stats":null,"previous_names":["kristofferstrube/blazor.confetti"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Confetti","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Confetti/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Confetti/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Confetti/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KristofferStrube","download_url":"https://codeload.github.com/KristofferStrube/Blazor.Confetti/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243589278,"owners_count":20315471,"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":[],"created_at":"2025-03-14T14:18:44.762Z","updated_at":"2026-01-02T12:18:50.292Z","avatar_url":"https://github.com/KristofferStrube.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/KristofferStrube/Blazor.Confetti)](https://github.com/KristofferStrube/Blazor.Confetti/issues)\n[![GitHub forks](https://img.shields.io/github/forks/KristofferStrube/Blazor.Confetti)](https://github.com/KristofferStrube/Blazor.Confetti/network/members)\n[![GitHub stars](https://img.shields.io/github/stars/KristofferStrube/Blazor.Confetti)](https://github.com/KristofferStrube/Blazor.Confetti/stargazers)\n[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/KristofferStrube.Blazor.Confetti?label=NuGet%20Downloads)](https://www.nuget.org/packages/KristofferStrube.Blazor.Confetti/)\n\n# Blazor.Confetti\nA small service that can make confetti in your Blazor application. Works for both WASM and Server render mode.\n\n![Showcase](./docs/confetti.gif?raw=true)\n\n# Demo\nThe sample project can be demoed at https://kristofferstrube.github.io/Blazor.Confetti/\n\nOn each page, you can find the corresponding code for the example in the top right corner.\n\n# Getting Started\n## Prerequisites\nYou need to install .NET 8.0 or newer to use the library.\n\n[Download .NET 8](https://dotnet.microsoft.com/download/dotnet/8.0)\n\n## Installation\nYou can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:\n```bash\ndotnet add package KristofferStrube.Blazor.Confetti\n```\n\n# Usage\nThe package can be used in Blazor WebAssembly, Blazor Server, and Blazor WebApp projects both with interactive WASM and Server render modes.\n## Import\nYou need to reference the package in order to use it in your pages. This can be done in `_Import.razor` by adding the following.\n```razor\n@using KristofferStrube.Blazor.Confetti\n```\n\n## Add to service collection\nThe library has one service which is the `ConfettiService` which can be used to start a confetti animation. An easy way to make the service available on all your pages is by registering it in the `IServiceCollection` so that it can be dependency injected in the pages that need it. This is done in `Program.cs` by using our extension `AddConfettiService()` before you build the host like we do in the following code block.\n```csharp\nusing KristofferStrube.Blazor.Confetti;\n\nWebApplicationBuilder builder = WebApplication.CreateBuilder(args);\n\n// Adding other services\n\n// Adding our service\nbuilder.Services.AddConfettiService();\n\nWebApplication app = builder.Build();\n\n// Configure middleware\n\napp.Run();\n```\n\n## Renderer\nFor the confetti to appear somewhere we also need to place a component at the root of our application which will work as the drawing space for the confetti animation. A good place to do this could be in `MainLayout.razor` after all other markup. If you are creating a Blazor WebApp you might need to add the attribute `@rendermode=\"InteractiveServer\"` to the `Confetti` component to make it interactive.\n```razor\n@inherits LayoutComponentBase\n\u003cdiv class=\"page\"\u003e\n    \u003cdiv class=\"sidebar\"\u003e\n        \u003cNavMenu /\u003e\n    \u003c/div\u003e\n\n    \u003cmain\u003e\n        \u003cdiv class=\"top-row px-4\"\u003e\n            \u003ca href=\"https://learn.microsoft.com/aspnet/core/\" target=\"_blank\"\u003eAbout\u003c/a\u003e\n        \u003c/div\u003e\n\n        \u003carticle class=\"content px-4\"\u003e\n            @Body\n        \u003c/article\u003e\n    \u003c/main\u003e\n\u003c/div\u003e\n\n\u003c!-- This is the part that we add. --\u003e\n\u003cConfetti /\u003e\n```\n\n## Injecting and activating the confetti service\nNow we are ready to inject the `ConfettiService` in one of our pages or components to make some confetti.\n```razor\n@inject ConfettiService ConfettiService\n\n\u003cbutton class=\"btn btn-primary\" @onclick=\"Activate\"\u003eCelebration 🎉\u003c/button\u003e\n\n@code {\n    private void Activate()\n    {\n        ConfettiService.Activate(new());\n    }\n}\n```\n\nWith the above we create confetti from the bottom of the page with all the default settings. We can further customize the confetti colors, amount, origin, speed, and speed variation.\n```razor\n@inject ConfettiService ConfettiService\n\n\u003cbutton @ref=button class=\"btn btn-primary\" @onclick=\"Activate\"\u003eCelebration 🎉\u003c/button\u003e\n\n@code {\n    private ElementReference button;\n\n    private void Activate()\n    {\n        ConfettiOptions options = new()\n            {\n                Colors = [\"silver\", \"gold\", \"#B87333\"],\n                Pieces = 500,\n                Mode = ConfettiOriginMode.FromElement,\n                Origin = button,\n                Milliseconds = 2000,\n                VariationInMilliseconds = 500\n            };\n\n        ConfettiService.Activate(options);\n    }\n}\n```\n\n\n# Related repositories\nThe library uses the following other packages to support its features:\n- https://github.com/KristofferStrube/Blazor.SVGAnimation (To start and stop SVG animations)\n\n# Related articles\nThis repository was built with inspiration and help from the following series of articles:\n\n- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)\n- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)\n- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.confetti","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristofferstrube%2Fblazor.confetti","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.confetti/lists"}