@efinitytech/forkey

forkey

Map actions to keys in KeyboardEvents.

Usage

forkey(km: KeyMap): (e: KeyboardEvent) => void

The declaration for KeyMap looks like:

type KeyMap = { [key: string]: boolean | FunctionAcceptsKeyboardEventReturnsBoolean };

If a key matches event.key or event.code, it will run the associated function. If the function returns true, it will call event.preventDefault(). Or, if a boolean value is provided instead of the function, true will call event.preventDefault().

Browser

<input id="target" />

<script>
    // preventDefault() on Enter key.
    const fn = forkey({
        'Enter': true
    });

    document.getElementById('#target')
        .addEventListenter('keydown', fn);
</script>

JSX

import forkey from 'forkey';


// in markup:
<input onKeydown={forkey({ 
    // Case-insensitive. Evaluating to true calls preventDefault on the event.
    'enter': true,

    // Custom handler.
    ShiftLeft(e) => {
        console.log('event:', e);

        // Returning true will also call preventDefault on the event.
        return true;
    }
})} />