Selection

Node and edge selection with single, multi, modifier-key, lasso, and path-based modes.

Import

import { useSelection, GraphCanvas } from 'reagraph';

useSelection Hook

Parameters

Return Value

SelectionTypes

PathSelectionTypes

LassoType

Basic Selection

import { GraphCanvas, GraphCanvasRef, useSelection } from 'reagraph';

const ref = useRef<GraphCanvasRef>(null);

const {
  selections,
  actives,
  onNodeClick,
  onCanvasClick,
} = useSelection({
  ref,
  nodes,
  edges,
  type: 'single',
});

<GraphCanvas
  ref={ref}
  nodes={nodes}
  edges={edges}
  selections={selections}
  actives={actives}
  onNodeClick={onNodeClick}
  onCanvasClick={onCanvasClick}
/>

Multi-Select with Modifier Key

const { selections, actives, ...handlers } = useSelection({
  ref,
  nodes,
  edges,
  type: 'multiModifier',
});

Lasso Selection

const { selections, actives, onLasso, onLassoEnd, ...handlers } = useSelection({
  ref,
  nodes,
  edges,
  type: 'multi',
});

<GraphCanvas
  ref={ref}
  nodes={nodes}
  edges={edges}
  selections={selections}
  actives={actives}
  lassoType="node"
  onLasso={onLasso}
  onLassoEnd={onLassoEnd}
  {...handlers}
/>

Selection Callback

const { selections, ...handlers } = useSelection({
  ref,
  nodes,
  edges,
  onSelection: (ids) => console.log('Selected:', ids),
});

Notes

• useSelection returns event handlers that must be spread onto GraphCanvas
• actives highlights adjacent nodes/edges around the selection
• focusOnSelect centers the camera on the selected node
• pathHoverType="out" highlights outbound connections when hovering