react-keyboard-key
Container and hook with keyboard event listener.
Usage
Types
keyInfo: {
key: string | null;
code: string | null;
keyCode: number | null;
output: KeyboardEvent | null,
};
addKeyListener: () => void;
removeEventListener: () => void;
onKeyDownCallback: (event: KeyboardEvent) => void;Container
import { KeyListenerContainer } from 'react-keyboard-key';
...
const ExampleComponent: FC<Props> = ({ children }) => {
return (
<KeyListenerContainer
onKeyDownCallback={e => {
e.preventDefault();
}}
>
{keyInfo => (
<div>
{keyInfo.code}
</div>
)}
</KeyListenerContainer>
);
};Hook
import { useKeyboardKey } from 'react-keyboard-key';
const ExampleComponent: FC<Props> = () => {
const { keyInfo } = useKeyboardKey(onKeyDownCallback);
const onKeyDownCallback = (e: KeyboardEvent) => {
e.preventDefault
};
return (
<div>
{keyInfo.code}
</div>
);
};