use-keyboard@0.1.0
実装したいこと
domではなくReact Componentにeventを設定するタイプのhookが欲しい
code:js
本コードをuse-global-keyboard@0.1.0に名前を変えて、↑をuse-keyboard@0.1.0にしようかな
動的にevent登録を切り替えたかったので
code:script.js
import {useMemo, useEffect} from '../preact@10.5.13/hooks.js';
export function useKeyboard(element, keys, callback, options, deps) {
const {
enable = true,
filter,
preventDefault = true,
stopPropagation = true,
capture = false,
keydown = true,
keyup = false,
} = options ?? {};
const handleEvent = useMemo(() => enable ?
e => {
if (typeof keys === 'string') {
if (keys !== e.key) return;
} else {
if (keys.key && keys.key !== e.key) return;
if (keys.shiftKey !== undefined && keys.shiftKey !== e.shiftKey) return;
if (keys.ctrlKey !== undefined && keys.ctrlKey !== e.ctrlKey) return;
if (keys.altKey !== undefined && keys.altKey !== e.altKey) return;
if (keys.metaKey !== undefined && keys.metaKey !== e.metaKey) return;
}
if (!(filter?.(e) ?? true)) return;
if (preventDefault) e.preventDefault();
if (stopPropagation) e.stopPropagation();
callback();
} : undefined,
[keys, callback, enable, filter, preventDefault, stopPropagation, deps ?? []]
);
useEffect(() => {
if (!keydown || !handleEvent) return;
element.addEventListener('keydown', handleEvent, {capture});
return () => element.removeEventListener('keydown', handleEvent, {capture});
useEffect(() => {
if (!keyup || !handleEvent) return;
element.addEventListener('keyup', handleEvent, {capture});
return () => element.removeEventListener('keyup', handleEvent, {capture});
}