KeyboardLayoutController

Defined in: controllers/keyboard-layout.ts:35

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

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

new KeyboardLayoutController(_host): KeyboardLayoutController;

Defined in: controllers/keyboard-layout.ts:49

Parameters

_host

ReactiveControllerHost

The Lit component that owns this controller.

Returns

KeyboardLayoutController

Accessors

value

Get Signature

get value(): KeyboardLayoutMap | null;

Defined in: controllers/keyboard-layout.ts:42

The loaded keyboard layout, or null.

Returns

KeyboardLayoutMap | null

Methods

dispose()

dispose(): void;

Defined in: controllers/keyboard-layout.ts:93

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()

hostConnected(): void;

Defined in: controllers/keyboard-layout.ts:58

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.