react-keyboard-hooks
Advanced tools
Comparing version
import { useState, useEffect } from 'react'; | ||
import useSSR from 'use-ssr'; | ||
const useKey = (key) => { | ||
const useKey = (key, cb) => { | ||
const { isBrowser } = useSSR(); | ||
@@ -11,2 +11,5 @@ const [isKeyDown, setisKeyDown] = useState(false); | ||
setisKeyDown(true); | ||
if (cb) { | ||
cb(); | ||
} | ||
} | ||
@@ -27,10 +30,10 @@ }; | ||
}; | ||
}, [isBrowser, key]); | ||
}, [isBrowser, key, cb]); | ||
return isKeyDown; | ||
}; | ||
// returns an object with each key and its' current status. used internally by other hooks. | ||
// returns an object with each key and its' current status. | ||
const useKeys = (keys) => { | ||
const { isBrowser } = useSSR(); | ||
const [keyStatuses, setKeyStatuses] = useState(Object.fromEntries(keys.map((key) => [key, false]))); | ||
const [keyStatuses, setKeyStatuses] = useState(() => Object.fromEntries(keys.map((key) => [key, false]))); | ||
useEffect(() => { | ||
@@ -62,3 +65,3 @@ const keyDown = (e) => { | ||
// returns true if any of the keys are pressed. | ||
const useAnyKeys = (keys) => { | ||
const useAnyKeys = (keys, cb) => { | ||
const [isKeyDown, setisKeyDown] = useState(false); | ||
@@ -69,2 +72,5 @@ const keyStatuses = useKeys(keys); | ||
setisKeyDown(true); | ||
if (cb) { | ||
cb(); | ||
} | ||
} | ||
@@ -74,7 +80,7 @@ else { | ||
} | ||
}, [keyStatuses]); | ||
}, [keyStatuses, cb]); | ||
return isKeyDown; | ||
}; | ||
// returns true if all of the keys are pressed. | ||
const useAllKeys = (keys) => { | ||
const useAllKeys = (keys, cb) => { | ||
const [isKeyDown, setisKeyDown] = useState(false); | ||
@@ -85,2 +91,5 @@ const keyStatuses = useKeys(keys); | ||
setisKeyDown(true); | ||
if (cb) { | ||
cb(); | ||
} | ||
} | ||
@@ -90,3 +99,3 @@ else { | ||
} | ||
}, [keyStatuses]); | ||
}, [keyStatuses, cb]); | ||
return isKeyDown; | ||
@@ -93,0 +102,0 @@ }; |
@@ -12,3 +12,3 @@ 'use strict'; | ||
const useKey = (key) => { | ||
const useKey = (key, cb) => { | ||
const { isBrowser } = useSSR__default['default'](); | ||
@@ -20,2 +20,5 @@ const [isKeyDown, setisKeyDown] = react.useState(false); | ||
setisKeyDown(true); | ||
if (cb) { | ||
cb(); | ||
} | ||
} | ||
@@ -36,10 +39,10 @@ }; | ||
}; | ||
}, [isBrowser, key]); | ||
}, [isBrowser, key, cb]); | ||
return isKeyDown; | ||
}; | ||
// returns an object with each key and its' current status. used internally by other hooks. | ||
// returns an object with each key and its' current status. | ||
const useKeys = (keys) => { | ||
const { isBrowser } = useSSR__default['default'](); | ||
const [keyStatuses, setKeyStatuses] = react.useState(Object.fromEntries(keys.map((key) => [key, false]))); | ||
const [keyStatuses, setKeyStatuses] = react.useState(() => Object.fromEntries(keys.map((key) => [key, false]))); | ||
react.useEffect(() => { | ||
@@ -71,3 +74,3 @@ const keyDown = (e) => { | ||
// returns true if any of the keys are pressed. | ||
const useAnyKeys = (keys) => { | ||
const useAnyKeys = (keys, cb) => { | ||
const [isKeyDown, setisKeyDown] = react.useState(false); | ||
@@ -78,2 +81,5 @@ const keyStatuses = useKeys(keys); | ||
setisKeyDown(true); | ||
if (cb) { | ||
cb(); | ||
} | ||
} | ||
@@ -83,7 +89,7 @@ else { | ||
} | ||
}, [keyStatuses]); | ||
}, [keyStatuses, cb]); | ||
return isKeyDown; | ||
}; | ||
// returns true if all of the keys are pressed. | ||
const useAllKeys = (keys) => { | ||
const useAllKeys = (keys, cb) => { | ||
const [isKeyDown, setisKeyDown] = react.useState(false); | ||
@@ -94,2 +100,5 @@ const keyStatuses = useKeys(keys); | ||
setisKeyDown(true); | ||
if (cb) { | ||
cb(); | ||
} | ||
} | ||
@@ -99,3 +108,3 @@ else { | ||
} | ||
}, [keyStatuses]); | ||
}, [keyStatuses, cb]); | ||
return isKeyDown; | ||
@@ -102,0 +111,0 @@ }; |
@@ -1,1 +0,1 @@ | ||
export declare const useKey: (key: string) => boolean; | ||
export declare const useKey: (key: string, cb?: (() => void) | undefined) => boolean; |
@@ -1,2 +0,2 @@ | ||
export declare const useAnyKeys: (keys: string[]) => boolean; | ||
export declare const useAllKeys: (keys: string[]) => boolean; | ||
export declare const useAnyKeys: (keys: string[], cb?: (() => void) | undefined) => boolean; | ||
export declare const useAllKeys: (keys: string[], cb?: (() => void) | undefined) => boolean; |
{ | ||
"name": "react-keyboard-hooks", | ||
"version": "1.2.1", | ||
"version": "1.2.3", | ||
"description": "simple react ts keyboard inputs", | ||
@@ -33,4 +33,7 @@ "main": "dist/index.js", | ||
}, | ||
"files": [ | ||
"/dist" | ||
], | ||
"peerDependencies": { | ||
"react": "^16.x || ^17.x" | ||
"react": "^16.8.x || ^17.x" | ||
}, | ||
@@ -37,0 +40,0 @@ "dependencies": { |
@@ -24,4 +24,6 @@ <p align="center"> | ||
Compatible with React 16 and newer. | ||
Compatible with React 16.8 and newer. | ||
Does not support Internet Explorer for certain special keys such as Escape. If someone wants to add a map for the old key values feel free to create a PR, but I don't think IE is worth the time anymore. | ||
## Installation | ||
@@ -28,0 +30,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
243
0.83%15909
-82.09%16
-52.94%212
-69.36%1
Infinity%