Toolbelt.Blazor.HotKeys 8.2.0

Suggested Alternatives

Toolbelt.Blazor.HotKeys2

Additional Details

"Blazor HotKeys" has been deprecated. Its official successor is "Blazor HotKeys 2"!

There is a newer version of this package available.
See the version list below for details.
The owner has unlisted this package. This could mean that the package is deprecated, has security vulnerabilities or shouldn't be used anymore.
dotnet add package Toolbelt.Blazor.HotKeys --version 8.2.0
NuGet\Install-Package Toolbelt.Blazor.HotKeys -Version 8.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="Toolbelt.Blazor.HotKeys" Version="8.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Toolbelt.Blazor.HotKeys --version 8.2.0
#r "nuget: Toolbelt.Blazor.HotKeys, 8.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 Toolbelt.Blazor.HotKeys as a Cake Addin
#addin nuget:?package=Toolbelt.Blazor.HotKeys&version=8.2.0

// Install Toolbelt.Blazor.HotKeys as a Cake Tool
#tool nuget:?package=Toolbelt.Blazor.HotKeys&version=8.2.0

Blazor WebAssembly (client-side) HotKeys NuGet Package

Summary

This is a class library that provides configuration-centric keyboard shortcuts for your Blazor WebAssembly (client-side) apps.

You can declare associations of keyboard shortcut and callback action, like this code:

// The method "OnSelectAll" will be invoked 
//  when the user typed Ctrl+A key combination.
this.HotKeysContext = this.HotKeys.CreateContext()
  .Add(ModKeys.Ctrl, Keys.A, OnSelectAll)
  .Add(...)
  ...;

This library was created inspired by "angular-hotkeys".

Supported Blazor versions

"Blazor WebAssembly App (client-side) HotKeys" ver.8.x supports Blazor WebAssembly App version 3.1.0 preview 1, or later.
Of course, Blazor WebAssembly v.3.2 Official release version is also supported.

How to install and use?

1. Installation and Registration

Step.1 Install the library via NuGet package, like this.

> dotnet add package Toolbelt.Blazor.HotKeys

Step.2 Register "HotKeys" service into the DI container.

If the Blazor version of the project is ver.3.1 preview 4 or earlyer, you should add the code into ConfigureService method in the Startup class of your Blazor application.

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this line, and...
...
public class Startup
{
  public void ConfigureServices(IServiceCollection services)
  {
    services.AddHotKeys(); // <- Add this line.
    ...

If the Blazor version of the project is ver.3.2 preview 1 or later, you should add the code into Main method in the Program class of your Blazor application.

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this line, and...
...
public class Program
{
  public static async Task Main(string[] args)
  {
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    ...
    builder.Services.AddHotKeys(); // <!- Add this line.
    ...

2. Usage in your Blazor component (.razor)

Step.1 Implement IDisposable interface to the component.

@implements IDisposable @* <- Add this at top of the component.  *@
...

@code {
  ...
  public void Dispose() // <- Add "Dispose" method.
  {
  }
}

Step.2 Open the Toolbelt.Blazor.HotKeys namespace, and inject the HotKeys service into the component.

@implements IDisposable
@using Toolbelt.Blazor.HotKeys @* <- Add this, and ... *@
@inject HotKeys HotKeys @* <- And add this. *@
...

Step.3 Invoke CreateContext() method of the HotKeys service instance to create and activate hot keys entries at startup of the component such as OnInitialized() method.

You can add the combination with key and action to the HotKeysContext object that is returned from CreateContext() method, using Add() method.

Please remember that you have to keep the HotKeys Context object in the component field.

@code {

  HotKeysContext HotKeysContext;

  protected override void OnInitialized()
  {
    this.HotKeysContext = this.HotKeys.CreateContext()
      .Add(ModKeys.Ctrl|ModKeys.Shift, Keys.A, FooBar, "do foo bar.")
      .Add(...)
      ...;
  }

  void FooBar() // <- This will be invoked when Ctrl+Shift+A typed.
  {
    ...
  }
}

Note.1: You can also specify the async method to the callback action argument.

Note.2: The method of the callback action can take an argument which is HotKeyEntry object.

Step.4 Destroy the HotKeysContext when the component is disposing, in the Dispose() method of the component.

@code {
  ...
  public void Dispose()
  {
    this.HotKeysContext.Dispose(); // <- Add this.
  }
}

The complete source code (.razor) of this component is bellow.

@page "/"
@implements IDisposable
@using Toolbelt.Blazor.HotKeys
@inject HotKeys HotKeys

@code {

  HotKeysContext HotKeysContext;

  protected override void OnInitialized()
  {
    this.HotKeysContext = this.HotKeys.CreateContext()
      .Add(ModKeys.Ctrl|ModKeys.Shift, Keys.A, FooBar, "do foo bar.");
  }

  void FooBar()
  {
    // Do something here.
  }

  public void Dispose()
  {
    this.HotKeysContext.Dispose();
  }
}

Limitations

Server-side Blazor (Blazor Server App) is not supported

This library doesn't support Server-side Blazor (Blazor Server App), at this time.

No "Cheat Sheet"

Unlike "angular-hotkeys", this library doesn't provide "cheat sheet" feature, at this time.

Instead, the HotKeysContext object provides Keys property, so you can implement your own "Cheat Sheet" UI, like this code:

<ul>
    @foreach (var key in this.HotKeysContext.Keys)
    {
        <li>@key</li>
    }
</ul>

The rendering result:

- Shift+Ctrl+A: do foo bar.
- ...

Release Note

Release notes

License

Mozilla Public License Version 2.0

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  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. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Toolbelt.Blazor.HotKeys:

Package Downloads
WLWebApp.RazorClassLibrary2

Razor Components shared between WL Desktop and Online

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on Toolbelt.Blazor.HotKeys:

Repository Stars
jsakamoto/Toolbelt.Blazor.HotKeys
This is a class library that provides configuration-centric keyboard shortcuts for your Blazor WebAssembly (client-side) apps.
Version Downloads Last updated
13.0.0.1 44,625 12/30/2022