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" />
<PackageReference Include="Blazor.ClientTimer" />
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
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#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
#tool nuget:?package=Blazor.ClientTimer&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
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 | Versions 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.
-
net10.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.23)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.23)
-
net9.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.23)
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 |