I ❤️ .NET

In this article, let's learn about how to setup and use Hot Keys in Blazor WASM apps.

Note: If you have not done so already, I recommend you read the article on Prevent image leech by dynamically streaming image in Blazor WASM.

Table of Contents

1. Introduction
2. Installation
3. Configuration
4. Use Cases for Hot Keys
5. Demo
6. Advantages of Hot Keys
7. Limitations
8. Summary

Introduction

In the context of front-end development, a hotkey, also known as a keyboard shortcut or shortcut key, is a combination of keys on a computer keyboard that triggers specific actions within a software application. Hotkeys are designed to enhance user productivity and provide a quicker way to perform tasks without using a mouse or navigating through menus.

Installation

To start with Hot Keys, you need to,

1. Install the Toolbelt.Blazor.HotKeys2 package from NuGet.
2. Register HotKeys in DI Container using builder.Services.AddHotKeys2().

Configuration

To configure hot keys inside a component, you need to,

1. Implement IDisposable interface to the component.
2. Inject the HotKeys service into the component.
3. Create hot key context using HotKeys.CreateContext() in OnInitialized() or OnAfterRender() method.
4. Add the combination with key and action to the HotKeysContext object that is returned from CreateContext() method, using Add() method.
5. You can also specify the async method to the callback action argument. The method of the callback action can take an argument which is HotKeyEntryByCode or HotKeyEntryByKey object.
6. Dispose the HotKeysContext object when the component is disposing, in the Dispose() method of the component.

Use Cases for Hot Keys

The most common use cases for hot keys are,

• Saving a record while updating
• Activating search within a web site

Demo

Advantages of Hot Keys

The advantages of hot keys are as follows,

• Speed & Efficiency.
• Improved Accessibility.
• Reduced mouse dependency.
• Customization & Personilization.

Limitations

The only limitation of hot keys is that it can be used only in desktop devices where we have a key board device available to activate hot key.

Summary

In this article, we learned about what is hot keys and how to configure them in Blazor WASM apps using BlazorHotKeys package. We also learned about the advantages of using hot keys in our apps. Hotkeys empower end users by providing faster, more accessible, and customizable ways to interact with software applications, enhancing their overall efficiency and user experience. You can learn more about the Toolbelt.Blazor.HotKeys2 package in official docs.