@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

Readme

Source

@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) {
    // ...
  }

  // Unicode characters 'a', '1', '%'...
  // should be used directly in code
  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) {
    // ...
  }
};

FAQs

What is @fluentui/keyboard-keys?

Is @fluentui/keyboard-keys well maintained?

Last updated on 20 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install