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
- Use Cases for Hot Keys
- Advantages of Hot Keys
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
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.
To start with Hot Keys, you need to,
- Install the
Toolbelt.Blazor.HotKeys2package from NuGet.
- Register HotKeys in DI Container using
To configure hot keys inside a component, you need to,
IDisposable interfaceto the component.
HotKeysservice into the component.
Create hot key context using
Add the combination with key and action to the
HotKeysContext objectthat is returned from
You can also specify the
asyncmethod to the
callback actionargument. The method of the callback action can take an argument which is
HotKeysContext objectwhen the component is disposing, in the
Dispose()method of the component.
Code Sample - Configuring Hot Keys in Blazor WASM
Use Cases for Hot Keys
The most common use cases for hot keys are,
Saving a recordwhile updating
Activating searchwithin a web site
Demo - Dynamic Image Streaming
I ❤️ .NET
uses hot keys to provide search functionality. You can use press
/ key to activate search in the site.
Advantages of Hot Keys
The advantages of hot keys are as follows,
Speed & Efficiency.
Reduced mouse dependency.
Customization & Personilization.
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.
In this article, we learned about what is hot keys and how to configure them in Blazor WASM apps using
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
package in official docs.