KristofferStrube.Blazor.Confetti 0.2.0

Prefix Reserved
There is a newer version of this package available.
See the version list below for details.
dotnet add package KristofferStrube.Blazor.Confetti --version 0.2.0                
NuGet\Install-Package KristofferStrube.Blazor.Confetti -Version 0.2.0                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="KristofferStrube.Blazor.Confetti" Version="0.2.0" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add KristofferStrube.Blazor.Confetti --version 0.2.0                
#r "nuget: KristofferStrube.Blazor.Confetti, 0.2.0"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install KristofferStrube.Blazor.Confetti as a Cake Addin
#addin nuget:?package=KristofferStrube.Blazor.Confetti&version=0.2.0

// Install KristofferStrube.Blazor.Confetti as a Cake Tool
#tool nuget:?package=KristofferStrube.Blazor.Confetti&version=0.2.0                

License: MIT GitHub issues GitHub forks GitHub stars NuGet Downloads (official NuGet)

Blazor.Confetti

A small service that can make confetti in your Blazor application. Works for both WASM and Server render mode.

Showcase

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

Installation

You can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:

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.

@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.

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.

@inherits LayoutComponentBase
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>


<Confetti />

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.

@inject ConfettiService ConfettiService

<button class="btn btn-primary" @onclick="Activate">Celebration 🎉</button>

@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.

@inject ConfettiService ConfettiService

<button @ref=button class="btn btn-primary" @onclick="Activate">Celebration 🎉</button>

@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);
    }
}

The library uses the following other packages to support its features:

This repository was built with inspiration and help from the following series of articles:

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.2.1 295 4/7/2024
0.2.0 106 4/7/2024
0.1.3 166 2/11/2024
0.1.2 107 2/11/2024
0.1.1 105 2/11/2024
0.1.0 297 12/18/2023