svelte-keydown

Utility to listen for keyboard events.

Utility component leveraging the svelte:body API to listen for keydown events.

Use Cases

• toggle modals
• capture a combination of keys (i.e., "Meta-s")

---

Install

yarn add -D svelte-keydown
# OR
npm i -D svelte-keydown

Usage

Basic

<script>
  import Keydown from "svelte-keydown";

  let events = [];
</script>

<Keydown
  on:Enter={() => {
    events = [...events, "enter"];
  }}
/>

Press "enter": {events.join(", ")}

Pause on input

Set pauseOnInput to prevent the utility from capturing keydown events on input events.

<script>
  let evt = [];
</script>

<Keydown
  pauseOnInput
  on:key={(e) => {
    evt = [...evt, e.detail];
  }}
/>

<input placeholder="Type here..." />

{evt.join(", ")}

Examples

Escape to Close Modal

In this use case, keydown events are paused if the modal is not open.

<script>
  let showModal = true;

  function closeModal() {
    showModal = false;
  }
</script>

<Keydown paused={!showModal} on:Escape={closeModal} />

<button
  on:click={() => {
    showModal = !showModal;
  }}
>
  Toggle me
</button>

<br /><br />

Toggled? {showModal}

"Command+S" to Save

Use the combo dispatched event to listen for a combination of keys.

<script>
  let save = [];
</script>

<Keydown
  on:combo={(e) => {
    if (e.detail === "Meta-s") {
      console.log("Save");
      save = [...save, e.detail];
    }
  }}
/>

{save.join(", ")}

API

Prop name	Value
paused	boolean (default: false)
pauseOnInput	boolean (default: false)

Dispatched events

on:[Key]

Example:

<Keydown on:Enter />
<Keydown on:Escape />

on:key

Alternative API to on:[Key].

Example:

<script>
  let key_events = [];
</script>

<Keydown
  on:key={({ detail }) => {
    key_events = [...key_events, detail];
  }}
/>

<pre>
  {JSON.stringify(key_events, null, 2)}
</pre>

on:combo

Triggered when a sequence of keys are pressed and cleared when a keyup event is fired.

Examples:

• "Shift-S"
• "Meta-c" (Copy)
• "Meta-v" (Paste)

<script>
  let combo_events = [];
</script>

<Keydown
  on:combo={({ detail }) => {
    combo_events = [...combo_events, detail];
  }}
/>

<pre>
  {JSON.stringify(combo_events, null, 2)}
</pre>

TypeScript

Svelte version 3.31 or greater is required to use this module with TypeScript.

Changelog

CHANGELOG.md

License

MIT