lomer-ui

Action

Hotkey

Triggers actions with keyboard shortcuts.

Installation

Usage

Preview

Press "F".

Press "Ctrl + F".

Press "Shift + Alt + F".

Svelte Code

1 
<script>
2 
  import { hotkey } from '$lib/actions/hotkey.svelte';
3 
</script>
4
5 
<!-- Basic -->
6 
<div use:hotkey={{ code: 'KeyF', onKeydown: () => alert('F') }}>
7 
  <p>Press "F".</p>
8 
</div>
9
10 
<!-- With Ctrl -->
11 
<div
12 
  use:hotkey={{
13 
    code: 'KeyF',
14 
    ctrlKey: true,
15 
    onKeydown: () => alert('Ctrl + F')
16 
  }}
17 
>
18 
  <p>Press "Ctrl + F".</p>
19 
</div>
20
21 
<!-- With multiple -->
22 
<div
23 
  use:hotkey={{
24 
    code: 'KeyF',
25 
    shiftKey: true,
26 
    altKey: true,
27 
    onKeydown: () => alert('Shift + Alt + F')
28 
  }}
29 
>
30 
  <p>Press "Shift + Alt + F".</p>
31 
</div>
32

Parameters

Parameter Type Description
options.key string The key that triggers the "onKeydown" function when pressed.
options.onKeydown (event: KeyboardEvent) => void A callback function that executes when the specified key is pressed.
options.ctrlKey boolean Whether the Ctrl key must be held while pressing the key.
options.metaKey boolean Whether the Meta key (⌘ on macOS) must be held.
options.shiftKey boolean Whether the Shift key must be held.
options.altKey boolean Whether the Alt (Option on macOS) key must be held.