diff --git a/docs/useHotkeys.mdx b/docs/useHotkeys.mdx index 98f5040c..5d18e746 100644 --- a/docs/useHotkeys.mdx +++ b/docs/useHotkeys.mdx @@ -76,19 +76,6 @@ to listen to the `+` character, you can set `splitKey` to i.e. `-` and listen fo * `keyup: boolean` Determine if you want to listen on the keyup event * `keydown: boolean` Determine if want to listen on the keydown event - - {() => { - const [amount, setAmount] = useState(0); - useHotkeys('ctrl+t', () => setAmount(amount => amount + 100), {enableOnTags: ['INPUT']}); - return ( -
- - Add {amount} dollars to my bank account. -
- ); - }} -
- ## Memoisation Let's check out a slightly different example to see how memoisation effects your application. @@ -139,7 +126,7 @@ approach for `setAmount` like in the very first example: {() => { const [amount, setAmount] = useState(0); - useHotkeys('m', () => setAmount(amount => amount + 100)); + useHotkeys('l', () => setAmount(amount => amount + 100)); return (
Add {amount} dollars to my bank account. diff --git a/src/index.ts b/src/index.ts index 38c60c70..ecd76654 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import hotkeys, {KeyHandler} from "hotkeys-js"; -import {useCallback, useEffect} from "react"; +import {useCallback, useEffect, useMemo} from "react"; type AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT'; @@ -21,16 +21,14 @@ export function useHotkeys( const memoisedCallback = useCallback(callback, deps); useEffect(() => { - hotkeys.filter = ({target, srcElement}) => { - if (options.enableOnTags) { + if (options.enableOnTags) { + hotkeys.filter = ({target, srcElement}) => { // @ts-ignore const targetTagName = (target && target.tagName) || (srcElement && srcElement.tagName); - return Boolean(targetTagName && options.enableOnTags.includes(targetTagName as AvailableTags)); - } - - return false; - }; + return Boolean(targetTagName && options.enableOnTags && options.enableOnTags.includes(targetTagName as AvailableTags)); + }; + } if (options.filter) hotkeys.filter = options.filter; diff --git a/tsconfig.json b/tsconfig.json index b711ba19..ece7b207 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,11 @@ { "compilerOptions": { - "target": "es2015", - "module": "esnext", + "target": "ES5", + "module": "ESNext", "moduleResolution": "node", "jsx": "react", "strict": true, "allowSyntheticDefaultImports": true }, "include": ["src"] -} \ No newline at end of file +}