Add Hotkeys to Svelte Apps Easily – Svelte-Keyboard-Shortcuts

Svelte-keyboard-shortcuts is a lightweight Svelte library that allows you to assign specific actions triggered by keyboard commands in your Svelte apps.

This library provides a simple way to define and manage shortcuts. This can make your Svelte application more efficient and user-friendly, especially for users who appreciate quick navigation and interaction.

Svelte-keyboard-shortcuts focuses on three primary action types: running a callback function, setting focus to an element, and simulating a click event. You can use it to create shortcuts for common actions, improve accessibility, and boost overall application speed for keyboard-savvy users.

Features

Use Cases

• Form Navigation: Users can quickly jump between form fields using shortcuts like Tab or Shift+Tab, or jump to specific sections using assigned keys. This optimizes data entry speed and reduces reliance on mouse clicks. For example, assign ‘Ctrl + S’ to submit a form or ‘Esc’ to cancel and clear the input fields.
• Global Application Actions: Implement shortcuts for common application-level actions. For example, you could assign ‘Ctrl + /’ to open a search modal, ‘?’ to display a help dialog, or ‘Alt + N’ to create a new record or document within your application.
• Enhanced Accessibility: Users with motor impairments or those who prefer keyboard navigation can benefit significantly from shortcuts. Assign keys to trigger actions that are normally performed with a mouse, like opening menus, navigating carousels, or activating specific controls.
• Power User Efficiency: For users who frequently interact with your application, keyboard shortcuts offer a faster alternative to mouse-based navigation. Imagine assigning keys to quickly switch between application views, open commonly used tools, or perform bulk actions.

Installation

Install Svelte-keyboard-shortcuts using your preferred package manager.

Using npm:

npm install svelte-keyboard-shortcuts svelte

Usage

1. Import the Shortcuts component into your layout file (layout.svelte or a similar root component) to initialize the shortcut context across your application. You can configure global options like timeout and input generation within this component.

<script lang="ts">
   import Shortcuts from 'svelte-keyboard-shortcuts';
</script>
<Shortcuts
   options={{
      // generateKbd: true // Optional: Generate a visual keyboard element next to the shortcut target
      // timeout: 1000 // Optional: Set the timeout for multiple key presses in milliseconds (default: 1000)
   }}
/>

2. import the shortcuts action into the individual Svelte components where you want to define shortcuts. You can apply this action to any HTML element.

Running a Callback:

<script>
   import { shortcuts } from 'svelte-keyboard-shortcuts';
   function handleOnClick() {
      console.log('Button clicked!');
   }
</script>
<button use:shortcuts on:click={handleOnClick}>Press P to click</button>

Setting Focus:

<script>
   import { shortcuts } from 'svelte-keyboard-shortcuts';
</script>
<div use:shortcuts={{ keys: ['c'] }} tabindex="0">Press C to focus</div>

Clicking an Element:

<script>
   import { shortcuts } from 'svelte-keyboard-shortcuts';
   function handleButtonClick() {
      console.log('Button Clicked!');
    }
</script>
<button use:shortcuts onclick={handleButtonClick}>Press P to click</button>

Ordered Keys and Links:

<script>
   import { shortcuts } from 'svelte-keyboard-shortcuts';
</script>
<a use:shortcuts={{ keys: ['a', 's', 'd'] }} href="/about">Press A, S, or D to navigate</a>

Displaying Pressed Keys:

<script>
   import { shortcuts } from 'svelte-keyboard-shortcuts';
   let keyPressesState = [];
   function handleKeyPress(event) {
      keyPressesState = [...keyPressesState, event.detail.key];
   }
</script>
<div use:shortcuts on:keydown={handleKeyPress} tabindex="0">
   Press any key here
</div>
<div class="flex flex-row">
   <span>Keys pressed:</span>
   {#each keyPressesState as keyPress}
      <kbd>{keyPress}</kbd>
   {/each}
</div>

FAQs

Q: Can I define global shortcuts that work across my entire application?
A: Yes, by importing and using the Shortcuts component in your root layout component, you establish a global context for shortcuts. You can then define shortcuts in any child component within that layout.

Q: How do I handle multiple key combinations, like ‘Ctrl + S’?
A: The library supports defining arrays of keys. For example, to define ‘Ctrl + S’, you would use keys: ['Control', 's']. The library automatically handles the order of these keys.

Q: What if I want to dynamically change shortcuts based on application state?
A: You can dynamically update the keys property passed to the use:shortcuts action. Svelte’s reactivity system will automatically rebind the shortcuts whenever the keys property changes.

Q: Does this library support modifier keys other than Ctrl?
A: Yes, you can use any standard modifier keys such as Shift, Alt, Meta (Command on macOS), in combination with regular keys to define your shortcuts.

Preview