# KeyboardLayoutController

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

Defined in: [controllers/keyboard-layout.ts:35](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/keyboard-layout.ts#L35)

A Lit ReactiveController that reads 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. Triggers host updates
when the layout loads or changes.

Creating the controller is what loads the layout: it loads when the first
host connects, and is read again when the window regains focus while a host
is connected. `FormatForDisplayController` uses this controller, so you
only need it for labels you draw yourself. To never ask the browser for the
layout, don't create the controller.

`value` is `null` on the server and for the host's first render, so a
server-rendered element hydrates unchanged.

## Example

```ts
class MoveKeys extends LitElement {
  private layout = new KeyboardLayoutController(this)

  render() {
    const label = (code: string) =>
      (this.layout.value?.get(code) ?? code).toUpperCase()
    return html`<kbd>${label('KeyW')}</kbd>`
  }
}
```

## Implements

- `ReactiveController`

## Constructors

### Constructor

```ts
new KeyboardLayoutController(_host): KeyboardLayoutController;
```

Defined in: [controllers/keyboard-layout.ts:49](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/keyboard-layout.ts#L49)

#### Parameters

##### \_host

`ReactiveControllerHost`

The Lit component that owns this controller.

#### Returns

`KeyboardLayoutController`

## Accessors

### value

#### Get Signature

```ts
get value(): KeyboardLayoutMap | null;
```

Defined in: [controllers/keyboard-layout.ts:42](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/keyboard-layout.ts#L42)

The loaded keyboard layout, or `null`.

##### Returns

`KeyboardLayoutMap` \| `null`

## Methods

### dispose()

```ts
dispose(): void;
```

Defined in: [controllers/keyboard-layout.ts:93](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/keyboard-layout.ts#L93)

Releases the controller now and removes it from its host. Use it to
remove a controller early: Lit's `removeController` alone leaves it active.

#### Returns

`void`

***

### hostConnected()

```ts
hostConnected(): void;
```

Defined in: [controllers/keyboard-layout.ts:58](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/keyboard-layout.ts#L58)

Loads the layout, subscribes to the layout store, and updates the host
when the layout changes. Connecting requests an update too, since the
layout may have changed while disconnected.

#### Returns

`void`

#### Implementation of

```ts
ReactiveController.hostConnected
```

***

### hostDisconnected()

```ts
hostDisconnected(): void;
```

Defined in: [controllers/keyboard-layout.ts:84](https://github.com/TanStack/hotkeys/blob/main/packages/lit-hotkeys/src/controllers/keyboard-layout.ts#L84)

Unsubscribes from the layout store and ends this host's interest in the
layout. The loaded layout stays for other hosts.

#### Returns

`void`

#### Implementation of

```ts
ReactiveController.hostDisconnected
```