useOnSelectionChange

Source on GitHub (opens in a new tab)

This hook lets you listen for changes to both node and edge selection. As the name implies, the callback you provide will be called whenever the selection of either nodes or edges changes.

import { useState } from 'react';
import ReactFlow, { useOnSelectionChange } from 'reactflow';
 
function SelectionDisplay() {
  const [selectedNodes, setSelectedNodes] = useState([]);
  const [selectedEdges, setSelectedEdges] = useState([]);
 
  useOnSelectionChange({
    onChange: ({ nodes, edges }) => {
      setSelectedNodes(nodes.map((node) => node.id));
      setSelectedEdges(edges.map((edge) => edge.id));
    },
  });
 
  return (
    <div>
      <p>Selected nodes: {selectedNodes.join(', ')}</p>
      <p>Selected edges: {selectedEdges.join(', ')}</p>
    </div>
  );
}

Signature

Name	Type
#Params
#`options`	`object`
#`options.onChange`	`(params: { nodes: Node[]; edges: Edge[]; }) => void`
#Returns
#	`void`

Notes

This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.

useNodesState()useOnViewportChange()