# useKeyboardLayout

<!-- DO NOT EDIT: this page is autogenerated from the type comments -->

```ts
function useKeyboardLayout(): KeyboardLayoutMap | null;
```

Defined in: [useKeyboardLayout.ts:39](https://github.com/TanStack/hotkeys/blob/main/packages/react-hotkeys/src/useKeyboardLayout.ts#L39)

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

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

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