svelte-keystroke

A key-stroke observer for Svelte, focussed on simplicity

<script>
  import Keystroke from "svelte-keystroke";
</script>

<Keystroke on:stroke={ ({ detail }) => console.log(detail) } />

Want to try it out real quick? Here's a basic demo, and here's a busier, comprehensive demo.

Summary

Keystroke offers four ways to respond to keyboard input, all through Svelte's on:<foo> events. The first three are pretty straightfoward.

• ① on:stroke Reports single, printable characters
• ② on:combo Only reports combinations involving modifier keys (Shift, Control, Alt, and Meta)
• ③ on:heldKeys For when you need raw details about which keys are currently depressed

The third option — let's call it "Binding Mode" lets you bind a function to whatever character you like.

• ③ on:<key> Runs the associated function every time the given key is pressed, regardless of its involvement as part of a stroke or combo

For examples, see on:Enter, on:Escape, on:q, & on:Q in the comprehensive demo.

Where's Meta / Command❓

svelte-keystroke pauses whenever the Meta key (⌘ on macOS) is depressed.

This is intentional. Why?

Well, it turns out that the ⌘ key — reported as "Meta" by keydown and keyup events, exibits some funky behaviors, that make it rather torturous to work with. In this first release (and perhaps indefinitely), svelte-keystroke "handles" this weirdness by simply pausing operations until the ⌘/Meta key is lifted again.

How is svelte-keystroke different?

Built for svelte

As compared with most js keystroke-handling libraries, svelte-keystroke's most obvious feature is that it's a Svelte* component.

*If you're not using Svelte, stop reading now and go play for a few minutes!.

Comparison with svelte-keydown

svelte-keystroke owes its basic design to svelte-keydown, and there's significant overlap between the two.

Same

• Arbitrary single-key binding via on:<key>…e.g., on:Enter, on:Tab

Similar

These events behave in similar ways, with the differences best observed by experimenting in the REPL:

• keydown: on:key ≈ keystroke: on:stroke
• keydown: on:combo ≈ keystroke; on:combo

Unique to svelte-keystroke

• keystroke; on:heldKeys

Brief History

Why svelte-keystroke? > TL;DR — It does exactly what I need it to, no more, no less.

I was working on a Svelte app (link TBD) — a typing trainer, with the need to directly manage basic ASCII input (letters & basic punctuation), as well as keyboard combinations like Control+R. svelte-keydown seemed perfect at first, but there were subtle issues that made it unsuitable for my specific needs. (Don't ask what issues…I've since forgotten.) But it was close!

Luckily, svelte-keydown is simple enough that it was fairly trivial to create my own component and make it do exactly what I want. Now, as I prepare to for the first release of that typing app, I'm pausing to separate out this generic component. It works for me, but ymmv. Enjoy!

Other Key Handling Libraries

Svelte

• svelte-keydown

JS

• tinykeys
• hotkeys
• keymaster
• mousetrap
• clack
• keymage
• Keypress
• KeyboardJS

Title image — "Alone on the keyboard" — slightly modified from the original