Skip to main content

KeyMap

This class handles keyboard shortcuts.

The KeyMap is attached to the Player and can be accessed like so:

import {usePlayer} from "ractive-player";
function Searchable() {
const {keymap} = usePlayer();
// create Alt-F shortcut for search
React.useEffect(() => {
const handler = (e: KeyboardEvent) => {
/* do something */
};
keymap.bind("Alt+F", handler);
return () => {
keymap.unbind("Alt+F", handler);
};
}, []);
}

Although you can create other KeyMap instances, you'll most likely only use the one attached to the player.

Static methods#

normalize()#

Returns a canonical form of the shortcut sequence.

static normalize(seq: string): string;

Example#

import {KeyMap} from "ractive-player";
// returns "Ctrl+Alt+2"
KeyMap.normalize("Alt+Ctrl+2");

identify()#

Given a KeyboardEvent (or React wrapper thereof), returns a shortcut sequence matching that event.

static identify(e: KeyboardEvent | React.KeyboardEvent<unknown>): string;

Methods#

bind()#

Bind a handler to be called when the shortcut sequence is pressed.

bind(seq: string, cb: (e: KeyboardEvent) => void): void;

unbind()#

Unbind a handler from a shortcut sequence.

unbind(seq: string, cb: (e: KeyboardEvent) => void): void;

getKeys()#

Return all shortcut sequences with handlers bound to them.

getKeys(): string[];

getHandlers()#

Get the list of handlers for a given shortcut sequence.

getHandlers(seq: string): ((e: KeyboardEvent) => void)[];

handle()#

Dispatches all handlers matching the given event.

handle(e: KeyboardEvent): void;