Skip to content

A key-stroke observer for Svelte, focussed on simplicity

License

Notifications You must be signed in to change notification settings

nvlgzr/svelte-keystroke

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Issues Badge Minzipped Badge NPM Version Badge

photo of antique keyboard with all the keys removed except for a key whose combination of : and > combine into a smiley face

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

JS


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

About

A key-stroke observer for Svelte, focussed on simplicity

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published