getKeyboardLayout

function getKeyboardLayout(): SvelteKeyboardLayout;

Defined in: packages/svelte-hotkeys/src/getKeyboardLayout.svelte.ts:80

Svelte function that returns reactive access to the browser's keyboard layout. layout is null until the layout 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.

The layout loads after the first component that uses this function mounts, so server-rendered output hydrates unchanged. getFormatForDisplay uses this function, so you only need it for labels you draw yourself.

To never ask the browser for the layout, set keyboardLayout: false in HotkeysProvider's defaultOptions. layout then stays null.

Returns#

SvelteKeyboardLayout

Object with a reactive layout property

Example#

<script lang="ts">
  import { getKeyboardLayout } from '@tanstack/svelte-hotkeys'

  const keyboard = getKeyboardLayout()
  const label = (code: string) =>
    (keyboard.layout?.get(code) ?? code).toUpperCase()
</script>

<kbd>{label('KeyW')}</kbd>