useKeyboard ​
Hook that helps to listen for keyboard events
sensors
test coverage
Last changed: last month
Installation ​
Library
CLI
Manual
typescript
import { useKeyboard } from '@siberiacancode/reactuse';
Usage ​
typescript
useKeyboard(ref, { onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });
// or
const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });
Demo ​
Api ​
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | Window | - | The target to attach the event listeners to |
options? | UseKeyboardOptions | - | The keyboard event options |
Returns
void
Parameters
Name | Type | Default | Note |
---|---|---|---|
options? | UseKeyboardOptions | - | The keyboard event options |
Returns
{ ref: StateRef<Target> }
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export type KeyboardEventHandler = (event: KeyboardEvent) => void;
export interface UseKeyboardOptions {
/** The callback function to be invoked on key down */
onKeyDown?: KeyboardEventHandler;
/** The callback function to be invoked on key up */
onKeyUp?: KeyboardEventHandler;
}
export interface UseKeyboard {
(target: HookTarget | Window, options: UseKeyboardOptions): void;
<Target extends Element>(options: UseKeyboardOptions, target?: never): { ref: StateRef<Target> };
}
Source ​
Source • DemoContributors ​
D