Bind a key with a mode restriction. boundKeyboard returns an unbind
function — return it from the effect so the binding is removed on unmount
(and re-registered on re-render, picking up fresh closures).
function MyScreen() {
const { boundKeyboard } = useKeyboard();
useEffect(() => {
return boundKeyboard(['ctrl+s'], () => save(), { mode: 'insert' });
}, []);
return <Text>Press Ctrl+S to save</Text>;
}
Tie a key to a clickable element: clicking the box or pressing its key both act on the same focus target.
function ClickableButton() {
const { boundKeyboard } = useKeyboard();
const ref = useMouseRegion({ onClick: doSomething });
useEffect(() => {
return boundKeyboard(['enter'], doSomething, { ref, focusId: 'save-btn' });
}, [boundKeyboard]);
return <Box ref={ref}>Save</Box>;
}
Access the keyboard API from within a React component.
Bindings are scoped to the current layer element automatically. When this hook is called inside a layer/modal element, the element's own layer id is pushed onto the engine owner stack so bindings are attributed to that layer even when it is not the top layer.
Must be used inside a KeyboardProvider.
When
boundKeyboardis given both aref(the element also registered via useMouseRegion) and afocusId, the ref → focusId mapping is recorded so that clicking the region forwards keyboard focus to thatfocusId— the mouse and the keyboard then converge on the same focus target. See BoundKeyboardReactOptions.