useKeyboardLayout

function useKeyboardLayout(): KeyboardLayoutMap | null;

Defined in: useKeyboardLayout.ts:38

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.

The layout loads after the first component that uses this hook mounts, so server-rendered output hydrates unchanged. useFormatForDisplay uses this hook, 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. This hook then returns null.

Returns#

KeyboardLayoutMap | null

Example#

function MoveKeys() @{
  const layoutMap = useKeyboardLayout()
  const label = (code: string) => (layoutMap?.get(code) ?? code).toUpperCase()

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