react-hotkeys-hook
Advanced tools
+7
-0
@@ -0,1 +1,8 @@ | ||
| ## [1.5.1] - 21-Jul-2019 | ||
| * Update readme. | ||
| ## [1.5.0] - 21-Jul-2019 | ||
| * Callback gets memoised inside hook by default | ||
| * Add memo deps array as third argument to hook | ||
| ## [1.4.0] - 03-Jun-2019 | ||
@@ -2,0 +9,0 @@ * Add callback to useEffect deps to allow update of hotkeys when callback changes |
+1
-1
| { | ||
| "name": "react-hotkeys-hook", | ||
| "version": "1.5.0", | ||
| "version": "1.5.1", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "files": [ |
+15
-1
@@ -59,3 +59,3 @@ # react-hotkeys-hook | ||
| ```typescript | ||
| useHotkeys(keys: string, callback: (event: KeyboardEvent, handler: HotkeysEvent) => void) | ||
| useHotkeys(keys: string, callback: (event: KeyboardEvent, handler: HotkeysEvent) => void, deps: any[] = []) | ||
| ``` | ||
@@ -67,2 +67,16 @@ | ||
| ### Parameters | ||
| - `keys: string`: Here you can set the key strokes you want the hook to listen to. You can use single or multiple keys, | ||
| modifier combination, etc. See [this](https://github.com/jaywcjlove/hotkeys/#defining-shortcuts) | ||
| section on the hotkeys documentation for more info. | ||
| - `callback: (event: KeyboardEvent, handler: HotkeysEvent) => void`: Gets executed when the defined keystroke | ||
| gets hit by the user. **Important:** Since version 1.5.0 this callback gets memoised inside the hook. So you don't have | ||
| to do this anymore by yourself. | ||
| - `deps: any[] = []`: The dependency array that gets appended to the memoisation of the callback. Here you define the inner | ||
| dependencies of your callback. If for example your callback actions depend on a referentially unstable value or a value | ||
| that will change over time, you should add this value to your deps array. Since most of the time your callback won't | ||
| depend on any unstable callbacks or changing values over time you can leave this value alone since it will be set to an | ||
| empty array by default. See the [Memoisation](#memoisation) section to | ||
| learn more and see an example where you have to set this array. | ||
| ### Found an issue or have a feature request? | ||
@@ -69,0 +83,0 @@ |
8026
20.15%95
17.28%