A simple library for handling keyboard shortcuts with Alpine.js.
npm install @danharrin/alpine-mousetrap> ✨ Help support the maintenance of this package by sponsoring me.
A simple library for handling keyboard shortcuts with Alpine.js.
!GitHub tag (latest by date)
This plugin adds a new x-mousetrap directive to all of your Alpine components that can be used to register keyboard shortcuts.
Include the following
`bash`
npm install @danharrin/alpine-mousetrap --save-dev
Add the x-mousetrap directive to your project by importing the package before Alpine.js.
`js
import Alpine from 'alpinejs'
import Mousetrap from '@danharrin/alpine-mousetrap'
Alpine.plugin(Mousetrap)
window.Alpine = Alpine
window.Alpine.start()
`
To register keyboard shortcuts for a button or other clickable element:
`html`
x-mousetrap.command-k.ctrl-k
>
Button
Check out the original Mousetrap documentation for more shortcut examples.
If the shortcut uses a +, replace it with a -. If the shortcut is a sequence, replace the space with --. If you're registering more than one shortcut, separate them with a period.
Alternatively, you can invoke a custom function when the keyboard shortcut is hit:
`html`
x-mousetrap.command-k.ctrl-k="console.log('command k or control k')"
>
Button
You may listen for "global" keyboard events that will work anywhere, including inside input fields:
`html`
x-mousetrap.global.command-k.ctrl-k
>
Button
You may listen for "/" keypress events using the keyword "slash":
`html``
x-mousetrap.global.slash
>
Button
This projects follow the Semantic Versioning guidelines.
Copyright (c) Dan Harrin
Licensed under the MIT license, see LICENSE.md for details.