useKeyboard

Respond to keyboard interactions.

Listen to keyboard events on the element. These events are only fired when IME composition is not taking place. Keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet.

import { useKeyboard } from 'react-gui/use-keyboard';

const ref = useKeyboard(keyboardProps);

API #

Return value #

useKeyboard returns a React callback ref.

ref (?HTMLElement) => void

A callback ref that must be passed to the target element.

KeyboardProps #

disabled ?boolean

Disable the hook.

onKeyDown ?(event: KeyboardEvent) => void

Called during the bubble phase of a non-composing keydown event.

onKeyDownCapture ?(event: KeyboardEvent) => void

Called during the capture phase of a non-composing keydown event.

onKeyUp ?(event: KeyboardEvent) => void

Called during the bubble phase of a non-composing keyup event.

onKeyUpCapture ?(event: KeyboardEvent) => void

Called during the capture phase of a non-composing keyup event.

KeyboardEvent #

The W3C KeyboardEvent

altKey boolean

Returns true if the Alt key (Option or on macOS) was active when the key event was dispatched.

ctrlKey boolean

Returns true if the Ctrl key was active when the key event was dispatched.

isComposing boolean

Returns true if the event is dispatched after compositionstart and before compositionend.

key string

The key that was responsible for dispatching the event.

locale string

A locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn’t know the keyboard’s locale.

metaKey boolean

Returns true if the Meta key (⌘ Command on macOS and ⊞ Windows on Windows) was active when the key event was dispatched.

repeat boolean

Returns true if the key is being held down such that it is automatically repeating.

shiftKey boolean

Returns true if the Shift key was active when the key event was dispatched.


Examples #

import useKeyboard from 'react-gui/use-keyboard';

const ref = useKeyboardEvents({
disabled,
onKeyDown,
onKeyDownCapture,
onKeyUp,
onKeyUpCapture
});
Updated
Edit
React GUICopyright © Facebook Inc.