# useKeyboardLayout

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

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

Defined in: [packages/ember-hotkeys/src/useKeyboardLayout.ts:39](https://github.com/TanStack/hotkeys/blob/main/packages/ember-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. 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`](../interfaces/EmberHotkeysScope.md)

## Returns

[`EmberHotkeyState`](../interfaces/EmberHotkeyState.md)\<`KeyboardLayoutMap` \| `null`\>

## Example

```gts
class MoveKeys extends Component {
  layout = useKeyboardLayout(this)

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

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