From c42ba1fa1d1520091794cd6d51bb985664450a76 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 25 Oct 2021 13:04:15 +0200 Subject: [PATCH] fix(hooks/keypress): check if document is defined --- src/hooks/useKeyPress.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts index 3b1b94d0..4095af3f 100644 --- a/src/hooks/useKeyPress.ts +++ b/src/hooks/useKeyPress.ts @@ -6,14 +6,16 @@ type Keys = Array; type PressedKeys = Set; type KeyOrCode = 'key' | 'code'; export interface UseKeyPressOptions { - target: Document | HTMLElement | ShadowRoot; + target: Document | HTMLElement | ShadowRoot | null; } +const doc = typeof document !== 'undefined' ? document : null; + // the keycode can be a string 'a' or an array of strings ['a', 'a+d'] // a string means a single key 'a' or a combination when '+' is used 'a+d' // an array means different possibilites. Explainer: ['a', 'd+s'] here the // user can use the single key 'a' or the combination 'd' + 's' -export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: document }): boolean => { +export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: doc }): boolean => { const [keyPressed, setKeyPressed] = useState(false); // we need to remember the pressed keys in order to support combinations @@ -64,16 +66,16 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { setKeyPressed(false); }; - options.target.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject); - options.target.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject); - options.target.addEventListener('blur', resetHandler); + options?.target?.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject); + options?.target?.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject); + options?.target?.addEventListener('blur', resetHandler); return () => { pressedKeys.current.clear(); - options.target.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject); - options.target.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject); - options.target.removeEventListener('blur', resetHandler); + options?.target?.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject); + options?.target?.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject); + options?.target?.removeEventListener('blur', resetHandler); }; } }, [keyCode, setKeyPressed]);