svelte-hotkey
A simple keyboard shortcut action for Svelte 5.
Install
npm install svelte-hotkey
Usage
<script lang="ts">
import { hotkey } from 'svelte-hotkey';
function showCommandPalette() {
console.log('Open command palette');
}
</script>
<button use:hotkey={{ ctrlKey: true, code: 'KeyK', handle: showCommandPalette }}>
Ctrl + K
</button>
Pressing Ctrl + K triggers the showCommandPalette function.
When handle is omitted, clicking the element is used as the default behavior.
<button
use:hotkey={{ shiftKey: true, code: 'Enter' }}>
Send
</button>
Parameters
| Name | Type | Description |
|---|---|---|
code |
string |
The KeyboardEvent.code to match (e.g. 'KeyS', 'Enter') |
ctrlKey |
boolean (optional) |
Require the Ctrl key |
metaKey |
boolean (optional) |
Require the Meta key |
shiftKey |
boolean (optional) |
Require the Shift key |
altKey |
boolean (optional) |
Require the Alt key |
handle |
() => void (optional) |
Custom handler function |
allowRepeat |
boolean (optional) |
Allow repeated key events (default: false) |
License
MIT
