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