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: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.
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
JS
Title image — "Alone on the keyboard" — slightly modified from the original
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.