Skip to Content
Docs⚡️ ⏐ AdvancedHotkeys

Hotkeys

We recommend using reakeys  for binding hotkeys.

There are a few examples below of how to bind hotkeys via reakeys. Follow these steps to bind hotkeys using Reakeys:

1. Import useHotkeys hook from reakeys.

import { useHotkeys } from 'reakeys';

2. Create a ref for the graph.

const graphRef = useRef<GraphCanvasRef | null>(null);
 
return <GraphCanvas ref={graphRef} />;

3. Bind Hotkeys to the Graph:

useHotkeys([
  {
    name: 'Zoom In',
    keys: 'mod+shift+i',
    action: 'keydown',
    category: 'Graph',
    callback: event => {
      event?.preventDefault();
      graphRef.current?.zoomIn();
    }
  },
  {
    name: 'Zoom Out',
    keys: 'mod+shift+o',
    action: 'keydown',
    category: 'Graph',
    callback: event => {
      event?.preventDefault();
      graphRef.current?.zoomOut();
    }
  },
  {
    name: 'Center',
    category: 'Graph',
    keys: 'mod+shift+c',
    action: 'keydown',
    callback: event => {
      event?.preventDefault();
      graphRef.current?.centerGraph(complexNodes.map(node => node.id));
    }
  }
]);

4. Bind Hotkeys to Selection Actions:

const { clearSelections, setSelections } = useSelection({
  ref: graphRef,
  nodes,
  edges,
  pathSelectionType: 'all'
});
 
useHotkeys([
  {
    name: 'Select All',
    keys: 'mod+a',
    action: 'keydown',
    category: 'Graph',
    description: 'Select all nodes and edges',
    callback: event => {
      event.preventDefault();
      setSelections(nodes.map(node => node.id));
    }
  },
  {
    name: 'Deselect Selections',
    category: 'Graph',
    description: 'Deselect selected nodes and edges',
    keys: 'escape',
    action: 'keydown',
    callback: event => {
      event.preventDefault();
      clearSelections();
    }
  }
]);

Note: You can bind any available Graph actions to hotkeys via reference.

Last updated on
Export as ImageSelection