Skip to content

Commit e53a20f

Browse files
feat(useKeyPress): allow complex bindings via key combos
1 parent 6ffebb6 commit e53a20f

File tree

1 file changed

+43
-12
lines changed

1 file changed

+43
-12
lines changed

src/useKeyPress.ts

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,63 @@
1-
import * as React from 'react';
1+
import * as React from "react";
2+
const { useState, useEffect } = React;
23

3-
const {useState, useEffect} = React;
4+
interface Options {
5+
useKeyboardJS: boolean;
6+
}
7+
8+
const defaults: Options = {
9+
useKeyboardJS: false
10+
};
411

5-
// kudos: https://usehooks.com
6-
const useKeyPress = (targetKey: string) => {
12+
const useKeyPress = (targetKey: string, config: Options = defaults) => {
713
const [state, setState] = useState(false);
14+
const { useKeyboardJS } = config;
815

9-
const downHandler = ({key}: KeyboardEvent) => {
16+
let keyboardjs;
17+
18+
if (useKeyboardJS) {
19+
import("keyboardjs").then(module => {
20+
keyboardjs = module;
21+
});
22+
}
23+
24+
const regularDownHandler = ({ key }: KeyboardEvent) => {
1025
if (key === targetKey) {
1126
setState(true);
1227
}
13-
}
14-
const upHandler = ({key}: KeyboardEvent) => {
28+
};
29+
30+
const regularUpHandler = ({ key }: KeyboardEvent) => {
1531
if (key === targetKey) {
1632
setState(false);
1733
}
1834
};
1935

36+
const customDownHandler = () => {
37+
setState(true);
38+
};
39+
const customUpHandler = () => {
40+
setState(false);
41+
};
42+
2043
useEffect(() => {
21-
window.addEventListener('keydown', downHandler);
22-
window.addEventListener('keyup', upHandler);
44+
if (useKeyboardJS) {
45+
keyboardjs.bind(targetKey, customDownHandler, customUpHandler);
46+
} else {
47+
window.addEventListener("keydown", regularDownHandler);
48+
window.addEventListener("keyup", regularUpHandler);
49+
}
2350
return () => {
24-
window.removeEventListener('keydown', downHandler);
25-
window.removeEventListener('keyup', upHandler);
51+
if (useKeyboardJS) {
52+
keyboardjs.unbind(targetKey, customDownHandler, customUpHandler);
53+
} else {
54+
window.removeEventListener("keydown", regularDownHandler);
55+
window.removeEventListener("keyup", regularUpHandler);
56+
}
2657
};
2758
}, []);
2859

2960
return state;
30-
}
61+
};
3162

3263
export default useKeyPress;

0 commit comments

Comments
 (0)