Actions
HotKey
This action allows you to execute a callback when a key or combination of keys are pressed.
# Example
Example.svelte
<script>
import { hotkey } from '@gzim/svelte-actions';
</script>
<section
use:hotkey={{
callback: () => {
alert('You have pressed Alt + P');
},
alt: true,
code: 'KeyP'
}}
>
<p>Press Alt/Option + P</p>
<button
use:hotkey={{
alt: true,
code: 'KeyB'
}}
on:click={() => {
alert('Button pressed');
}}
>
Click or press Alt/Option + B</button
>
</section>
<style>
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
font-size: 2rem;
color: rgb(var(--kd-color-brand));
}
button {
padding: 0.5rem 1rem;
margin: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
background-color: rgb(var(--kd-color-brand));
color: rgb(var(--kd-color-inverse));
}
</style>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
# Props
| Property | Type | Description | Default Value |
|---|---|---|---|
callback | () => void | Function to be executed when the specified hotkey is pressed, if not specified, the node will be clicked. | N/A |
shift | boolean | If true, the Shift key must be held down for the callback to be executed. | false |
ctrl | boolean | If true, the Control key must be held down for the callback to be executed. | false |
alt | boolean | If true, the Alt key must be held down for the callback to be executed. | false |
meta | boolean | If true, the Meta key (Windows key or Command key on Mac) must be held down for the callback to be executed. | false |
code | string | Specifies the key that must be pressed to trigger the callback. Use 'KeyP' format for letters (e.g., 'KeyA' for 'A') or key names like 'Enter', 'Escape', etc., for other keys. | N/A |