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.
Keystroke offers four ways to respond to keyboard input, all through Svelte's on:<foo> events. The first three are pretty straightfoward.
- ①
on:strokeReports single, printable characters - ②
on:comboOnly reports combinations involving modifier keys (Shift, Control, Alt, and Meta) - ③
on:heldKeysFor 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.
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.
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!.
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
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!
Title image — "Alone on the keyboard" — slightly modified from the original