Blazor.ClientTimer 1.0.0

dotnet add package Blazor.ClientTimer --version 1.0.0
                    
NuGet\Install-Package Blazor.ClientTimer -Version 1.0.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="Blazor.ClientTimer" Version="1.0.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Blazor.ClientTimer" Version="1.0.0" />
                    
Directory.Packages.props
<PackageReference Include="Blazor.ClientTimer" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Blazor.ClientTimer --version 1.0.0
                    
#r "nuget: Blazor.ClientTimer, 1.0.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.
#:package Blazor.ClientTimer@1.0.0
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Blazor.ClientTimer&version=1.0.0
                    
Install as a Cake Addin
#tool nuget:?package=Blazor.ClientTimer&version=1.0.0
                    
Install as a Cake Tool

Blazor.ClientTimer

A lightweight Blazor component for client-side countdown timers with customizable formatting.

Features

  • Client-side rendering - Timer updates happen in the browser without server roundtrips
  • Customizable format - Display time in any format using dayjs duration formatting
  • Configurable interval - Set update frequency to balance performance and precision
  • Simple API - Just set an end time and format string

Installation

dotnet add package Blazor.ClientTimer

Setup

Add the required JavaScript file to your App.razor or _Layout.cshtml:

<script src="_content/Blazor.ClientTimer/TimerCountdown.js"></script>

Add the using directive to your _Imports.razor:

Usage

Basic Example
<TimerCountdown End="@_endTime" Format="HH:mm:ss"/>

@code {
    private DateTime _endTime = DateTime.Now.AddHours(2);
}
Custom Interval
<TimerCountdown End="@_endTime" 
                Format="HH:mm:ss" 
                Interval="500"/>

@code {
    private DateTime _endTime = DateTime.Now.AddMinutes(30);
}

How It Works

The component:

  • Converts the End DateTime to a Unix timestamp
  • Passes it to a client-side web component (<timer-countdown>)
  • JavaScript handles the countdown logic and display updates
  • No server communication required after initial render

Browser Compatibility

Requires browsers with support for:

  • Custom Elements (Web Components)
  • dayjs library (included with the component)
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.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.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
1.0.0 46 2/7/2026