Solid Hotkeys - Cmd+S+H
Solid Hotkeys is the easiest way to add hotkeys to your application. Built for and with Solid.
Motivation
You gotta have hotkeys in your app. It doesn't use timeouts and other stuff like that, but rather checks if the keys currently are pressed and in the right order.
Gotchas
This library uses OPTIMISTIC DEFAULT PREVANTION or ODP - YEAH YOU KNOW ME. Which basically means if you have a hotkey with the keys META+S+D, everything before that will have it's default behaviour prevented.
Installation
There are a couple of things you need to do to install Hotkeys.
# yarn
yarn add solid-hotkeys
# npm
npm i solid-hotkeys
and presto you can get to hotkeying.
Usage
The API is pretty simple and extensively typed, so it's going to be really hard to mess it up, but here are a couple of examples:
Prerequisites
Register the useHotkeys hook in your app.
render(() => {
useHotkeys();
return <div />;
}, document.getElementById('root') as HTMLElement);
Basic
const opposite = (prev: boolean) => !prev;
const Basic = () => {
const [show, setShow] = createSignal(false);
createHotkey(['META', 'S'], event => {
event.preventDefault();
setShow(true);
});
return (
<Show when={show()} fallback={"I'm not shown"}>
I'm shown now
</Show>
);
};
NOTE: THE CURRENTLY PRESSED KEYS ARE ALL UPPERCASE BECAUSE OF NORMALIZATION
- it has full types, so it'll be pretty easy to adjust
Types
You can also import the types so you can have stricter typing in your app!
import type {
HotkeyArray,
NormalizedKeys,
HotkeyEvent,
HotkeyCallback,
} from 'solid-hotkeys';
- HotkeyArray -> what useHotkeys expects -> an array of all the normalized keys
- Normalized Keys -> All of the keys that are maybe on a keyboard, uppercased
- HotkeyEvent -> a stricter event where keys are strictly typed.
- HotkeyCallback -> what the callback for the createHotkey function is
Closing notes
Report bugs, features and such and let's get this party started.
Cheers, -Alek
3 May 18, 2022
3 Mar 19, 2022
4 May 3, 2022
14 Jan 3, 2023
11 Aug 24, 2021
11 Jan 4, 2023
4 Jun 6, 2022
3 May 23, 2022
262 Jan 2, 2023
42 Dec 24, 2022