useKeyboardLayout

function useKeyboardLayout(owner, scope?): EmberHotkeyState<KeyboardLayoutMap | null>;

Defined in: packages/ember-hotkeys/src/useKeyboardLayout.ts:39

The browser's keyboard layout, or null until it loads and in browsers that don't report one. The layout maps each physical code to the character it types, such as KeyQ to a on a French AZERTY keyboard. Only Chromium browsers report one. Pass the containing component as owner.

The layout loads after the render that created the utility, and is read again when the window regains focus, until the owner is destroyed. useFormatForDisplay already labels physical bindings with the layout, so you only need this utility for labels you draw yourself, or to keep the layout current while its owner lives.

value is null in FastBoot and until the render that created the utility has finished, so server-rendered labels rehydrate unchanged.

To never ask the browser for the layout, pass a scope whose default options set keyboardLayout: false. value is then null.

Parameters#

owner#

object

scope?#

EmberHotkeysScope

Returns#

EmberHotkeyState<KeyboardLayoutMap | null>

Example#

class MoveKeys extends Component {
  layout = useKeyboardLayout(this)

  label = (code: string) =>
    (this.layout.value?.get(code) ?? code).toUpperCase()

  <template><kbd>{{this.label "KeyW"}}</kbd></template>
}