From e53a20fe5b4434ecfba16015320e26083982abac Mon Sep 17 00:00:00 2001 From: Matheus Albuquerque Date: Wed, 26 Dec 2018 03:58:37 -0300 Subject: [PATCH] feat(useKeyPress): allow complex bindings via key combos --- src/useKeyPress.ts | 55 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 43 insertions(+), 12 deletions(-) diff --git a/src/useKeyPress.ts b/src/useKeyPress.ts index 317cb0186f..d1d7ea64e8 100644 --- a/src/useKeyPress.ts +++ b/src/useKeyPress.ts @@ -1,32 +1,63 @@ -import * as React from 'react'; +import * as React from "react"; +const { useState, useEffect } = React; -const {useState, useEffect} = React; +interface Options { + useKeyboardJS: boolean; +} + +const defaults: Options = { + useKeyboardJS: false +}; -// kudos: https://usehooks.com -const useKeyPress = (targetKey: string) => { +const useKeyPress = (targetKey: string, config: Options = defaults) => { const [state, setState] = useState(false); + const { useKeyboardJS } = config; - const downHandler = ({key}: KeyboardEvent) => { + let keyboardjs; + + if (useKeyboardJS) { + import("keyboardjs").then(module => { + keyboardjs = module; + }); + } + + const regularDownHandler = ({ key }: KeyboardEvent) => { if (key === targetKey) { setState(true); } - } - const upHandler = ({key}: KeyboardEvent) => { + }; + + const regularUpHandler = ({ key }: KeyboardEvent) => { if (key === targetKey) { setState(false); } }; + const customDownHandler = () => { + setState(true); + }; + const customUpHandler = () => { + setState(false); + }; + useEffect(() => { - window.addEventListener('keydown', downHandler); - window.addEventListener('keyup', upHandler); + if (useKeyboardJS) { + keyboardjs.bind(targetKey, customDownHandler, customUpHandler); + } else { + window.addEventListener("keydown", regularDownHandler); + window.addEventListener("keyup", regularUpHandler); + } return () => { - window.removeEventListener('keydown', downHandler); - window.removeEventListener('keyup', upHandler); + if (useKeyboardJS) { + keyboardjs.unbind(targetKey, customDownHandler, customUpHandler); + } else { + window.removeEventListener("keydown", regularDownHandler); + window.removeEventListener("keyup", regularUpHandler); + } }; }, []); return state; -} +}; export default useKeyPress;