@react-hookz/web/esnext/useKeyboardEvent/useKeyboardEvent.js

React hooks done right, for browser and SSR.

import { useMemo } from 'react';
import { useEventListener, useSyncedRef } from '..';
import { isBrowser } from "../util/const.js";
import { yieldFalse, yieldTrue } from "../util/misc.js";
const createKeyPredicate = (keyFilter) => {
    if (typeof keyFilter === 'function')
        return keyFilter;
    if (typeof keyFilter === 'string')
        return (ev) => ev.key === keyFilter;
    return keyFilter ? yieldTrue : yieldFalse;
};
const WINDOW_OR_NULL = isBrowser ? window : null;
/**
 * Executes callback when keyboard event occurred on target (window by default).
 *
 * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
 * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
 * @param deps Dependencies list that will be passed to underlying `useMemo`.
 * @param options Hook options.
 */
export function useKeyboardEvent(keyOrPredicate, callback, deps, options = {}) {
    const { event = 'keydown', target = WINDOW_OR_NULL, eventOptions } = options;
    const cbRef = useSyncedRef(callback);
    const handler = useMemo(() => {
        const predicate = createKeyPredicate(keyOrPredicate);
        return function kbEventHandler(ev) {
            if (predicate(ev)) {
                cbRef.current.call(this, ev);
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, deps);
    useEventListener(target, event, handler, eventOptions);
}