joseangelmt / Blazor.ConnectionStatusDetector

A Blazor service to detect (in client side) changes in connection status (online, offline) and a component to render fragments based on connection status

Blazor.ConnectionStatusDetector

This package provides the ConnectionStatusDetectorService that provides the ConnectionStatusChanged event that notifies changes in the connection status on the client side. Apart from the event, the service has the property IsOnline to query the connection status.

In addition, the Connection component is provided which renders different fragments depending on the connection status.

Add the package to your project:

dotnet add package Blazor.ConnectionStatusDetector --version 1.0.0

To use it, link to connection.js in your index.html file:

<script src="_content/Blazor.ConnectionStatusDetector/connection.js"></script>

Then register the service in yout Program.cs:

services.AddSingleton<IConnectionStatusDetectorService, ConnectionStatusDetectorService>();

To render different fragments based on the connection status, import the namespace in you _Imports.razor file:

@using Blazor.ConnectionStatusDetector

add a Connection component in your razor files, like:

<Connection>
    <Online>
        <h1 style="color: green">Online</h1>
    </Online>
    <Offline>
        <h1 style="color: red">Offline</h1>
    </Offline>
</Connection>