Louisette 0.8.2

Interaction Mode

The interactionMode store exposes the current interaction mode.

It can be one of the following values:

  • null: the user has not interacted with the page yet
  • pointer: the user is using a mouse or a trackpad
  • keyboard: the user is using a keyboard
  • virtual: the user is using a screen reader or a switch device

Example

You are currently using a unknown device.

Sources

+page.svelte

<script lang="ts">
  import { interactionMode } from 'louisette'
</script>

<p class="mb-4 text-sm opacity-60">
  You are currently using a <strong>{$interactionMode || 'unknown'}</strong> device.
</p>

<input
  type="text"
  class="block rounded border border-gray-300 bg-white p-2 shadow-sm dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-100 sm:text-sm"
  placeholder="Type some text..."
/>