useOnKeyboardEvents()

function useOnKeyboardEvents(events): void;

Wires keyboard shortcuts to diagram actions — undo/redo, copy/paste, delete, arrow-key nudging, and the like.

Pass a KeyboardEventHandlers map of shortcut strings to callbacks. The handlers are bound to the keyboard owned by the nearest <Diagram> and removed automatically on unmount. Multiple components can bind to the same diagram keyboard independently.

Inline handler maps are fine — no useMemo or useCallback needed. Each shortcut always calls the latest callback, and the binding is only refreshed when a shortcut is added or removed.

Shortcuts are ignored while focus sits in an <input>, <select>, <textarea>, or any contenteditable element, so typing never triggers them.

Parameters

Parameter	Type	Description
events	KeyboardEventHandlers	Map of shortcut strings to the callbacks they trigger.

Returns

void

See

• Keyboard
• keyboard-shortcuts

Throws

When called outside a <Diagram>.

Example

import { Diagram, useOnKeyboardEvents } from '@joint/react-plus';

function ShortcutLayer() {
  // Inline handlers are fine — no memoization required.
  useOnKeyboardEvents({
    'ctrl+z': () => console.log('undo'),
    'ctrl+y': () => console.log('redo'),
    delete: () => console.log('delete selection'),
    'up down left right': (event) => {
      event.preventDefault();
      console.log('nudge', event.key);
    },
  });
  return null;
}

function App() {
  return (
    <Diagram>
      <ShortcutLayer />
    </Diagram>
  );
}