https://github.com/kristofferstrube/blazor.confetti
A small service that can make confetti in your Blazor application.
https://github.com/kristofferstrube/blazor.confetti
Last synced: 5 months ago
JSON representation
A small service that can make confetti in your Blazor application.
- Host: GitHub
- URL: https://github.com/kristofferstrube/blazor.confetti
- Owner: KristofferStrube
- License: mit
- Created: 2024-02-11T14:35:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-04T09:58:27.000Z (almost 2 years ago)
- Last Synced: 2025-03-11T01:45:19.844Z (over 1 year ago)
- Language: HTML
- Size: 23.7 MB
- Stars: 12
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](/LICENSE)
[](https://github.com/KristofferStrube/Blazor.Confetti/issues)
[](https://github.com/KristofferStrube/Blazor.Confetti/network/members)
[](https://github.com/KristofferStrube/Blazor.Confetti/stargazers)
[](https://www.nuget.org/packages/KristofferStrube.Blazor.Confetti/)
# Blazor.Confetti
A small service that can make confetti in your Blazor application. Works for both WASM and Server render mode.
# Demo
The sample project can be demoed at https://kristofferstrube.github.io/Blazor.Confetti/
On each page, you can find the corresponding code for the example in the top right corner.
# Getting Started
## Prerequisites
You need to install .NET 8.0 or newer to use the library.
[Download .NET 8](https://dotnet.microsoft.com/download/dotnet/8.0)
## Installation
You can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:
```bash
dotnet add package KristofferStrube.Blazor.Confetti
```
# Usage
The package can be used in Blazor WebAssembly, Blazor Server, and Blazor WebApp projects both with interactive WASM and Server render modes.
## Import
You need to reference the package in order to use it in your pages. This can be done in `_Import.razor` by adding the following.
```razor
@using KristofferStrube.Blazor.Confetti
```
## Add to service collection
The 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.
```csharp
using KristofferStrube.Blazor.Confetti;
WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
// Adding other services
// Adding our service
builder.Services.AddConfettiService();
WebApplication app = builder.Build();
// Configure middleware
app.Run();
```
## Renderer
For 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.
```razor
@inherits LayoutComponentBase
```
## Injecting and activating the confetti service
Now we are ready to inject the `ConfettiService` in one of our pages or components to make some confetti.
```razor
@inject ConfettiService ConfettiService
Celebration 🎉
@code {
private void Activate()
{
ConfettiService.Activate(new());
}
}
```
With 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.
```razor
@inject ConfettiService ConfettiService
Celebration 🎉
@code {
private ElementReference button;
private void Activate()
{
ConfettiOptions options = new()
{
Colors = ["silver", "gold", "#B87333"],
Pieces = 500,
Mode = ConfettiOriginMode.FromElement,
Origin = button,
Milliseconds = 2000,
VariationInMilliseconds = 500
};
ConfettiService.Activate(options);
}
}
```
# Related repositories
The library uses the following other packages to support its features:
- https://github.com/KristofferStrube/Blazor.SVGAnimation (To start and stop SVG animations)
# Related articles
This repository was built with inspiration and help from the following series of articles:
- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)
- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)
- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)