What is @fluentui/keyboard-keys?
@fluentui/keyboard-keys is a utility package that provides constants for keyboard keys, making it easier to handle keyboard events in a consistent and readable manner. It is part of the Fluent UI library and is designed to help developers manage keyboard interactions in their applications.
What are @fluentui/keyboard-keys's main functionalities?
Key Constants
Provides constants for common keyboard keys, which can be used to handle keyboard events more easily and avoid hardcoding key values.
const { Enter, Escape, ArrowUp, ArrowDown } = require('@fluentui/keyboard-keys');
console.log(Enter); // 'Enter'
console.log(Escape); // 'Escape'
console.log(ArrowUp); // 'ArrowUp'
console.log(ArrowDown); // 'ArrowDown'
Key Event Handling
Simplifies the process of handling keyboard events by using predefined constants for key values, improving code readability and maintainability.
const { Enter, Escape } = require('@fluentui/keyboard-keys');
document.addEventListener('keydown', (event) => {
if (event.key === Enter) {
console.log('Enter key pressed');
} else if (event.key === Escape) {
console.log('Escape key pressed');
}
});
Other packages similar to @fluentui/keyboard-keys
keycode
The 'keycode' package provides a simple utility for converting between keyboard key names and their key codes. It offers similar functionality to @fluentui/keyboard-keys by allowing developers to handle keyboard events more easily, but it focuses more on key code conversions rather than providing constants.
keyboardjs
The 'keyboardjs' package is a robust library for handling keyboard events. It offers more advanced features compared to @fluentui/keyboard-keys, such as key combinations, sequences, and context-specific bindings. It is suitable for applications that require complex keyboard interactions.
mousetrap
The 'mousetrap' package is a lightweight library for handling keyboard shortcuts. It provides functionality similar to @fluentui/keyboard-keys but focuses on defining and managing keyboard shortcuts in a more user-friendly way. It is ideal for applications that need to support a variety of keyboard shortcuts.
@fluentui/keyboard-keys
Contains a set of keyboard constants for key and keyCode comparison in components. This package contains
named key values from The w3 uievents-key specification.
Unicode values are not included since there are a lot of locales to consider and they provide no benefit since
unicode characters can be used directly in code.
Usage
import { Enter } from '@fluentui/keyboard-keys';
const onKeyDown = (e: React.KeyboardEvent) => {
if (e.key === Enter) {
}
if (e.key === 'a') {
}
};
Legacy keyCode
In order to migrate easily from @fluentui/keyboard-key
legacy keyCode
support is available in this library but
is not encouraged for reuse since this propoerty has been deprecated for a while and will be removed in future
standards.
import { keyCodes } from '@fluentui/keyboard-keys';
const onKeyDown = (e: React.KeyboardEvent) => {
if (e.keyCode === keyCodes.Enter) {
}
if (e.key === keyCodes.a) {
}
};