Introduction

It is often desirable to allow users to view combinations of keys, and to record them for the purpose of having keyboard shortcuts.

This package allows the developer to accomplish this in a Fluent UI environment within a React app. Components exist to display keys, whether it be in-line, or displayed as their own block of elements.

Additionally, the ability to record keyboard shortcuts is given by this package. The API surface is designed in a way that will make the developer feel "at home" while they work with the official Fluent UI components for React.

Examples

Keybind Sequence

Keybind Recorder

For this example, please click the Recorder component to gain focus of it. Focus handling is provided by the KeybindDialog wrapper component.

Keybind Dialog

Some Example Use Cases

• Display and record keyboard shortcuts of your app on a Settings page
• Display keyboard shortcuts next to menu items in a list
• Show example input that corresponds to a demo of your app
• Show recent input of the user for the sake of memory

Support

This package works on Chromium-based browsers; the ability to convert DOM codes to OS-level key codes is currently only available for Windows.

Other browsers and OSes might be supported in the future, but because Fluent UI is a Microsoft library, the focus of this package is the Windows environment.