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.
A callback ref that must be passed to the target element.
KeyboardProps #
Disable the hook.
Called during the bubble phase of a non-composing keydown
event.
Called during the capture phase of a non-composing keydown
event.
Called during the bubble phase of a non-composing keyup
event.
Called during the capture phase of a non-composing keyup
event.
KeyboardEvent #
The W3C KeyboardEvent
Returns true
if the Alt
key (Option
or ⌥
on macOS) was active when the key event was dispatched.
Returns true
if the Ctrl
key was active when the key event was dispatched.
Returns true
if the event is dispatched after compositionstart
and before compositionend
.
The key that was responsible for dispatching the event.
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.
Returns true
if the Meta
key (⌘ Command
on macOS and ⊞ Windows
on Windows) was active when the key event was dispatched.
Returns true
if the key is being held down such that it is automatically repeating.
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
});