Quartz 4

128_useonselectionchange__

1 min read

useOnSelectionChange()

Source on GitHub

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.

WARNING

You need to memoize the passed onChange handler, otherwise the hook will not work correctly.

import { useState } from 'react';
import { ReactFlow, useOnSelectionChange } from '@xyflow/react';
 
function SelectionDisplay() {
  const [selectedNodes, setSelectedNodes] = useState([]);
  const [selectedEdges, setSelectedEdges] = useState([]);
 
  // the passed handler has to be memoized, otherwise the hook will not work correctly
  const onChange = useCallback(({ nodes, edges }) => {
    setSelectedNodes(nodes.map((node) => node.id));
    setSelectedEdges(edges.map((edge) => edge.id));
  }, []);
 
  useOnSelectionChange({
    onChange,
  });
 
  return (
    <div>
      <p>Selected nodes: {selectedNodes.join(', ')}</p>
      <p>Selected edges: {selectedEdges.join(', ')}</p>
    </div>
  );
}

Signature

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.

Parameters
  • [0].onChange: OnSelectionChangeFunc<NodeType, EdgeType> The handler to register.
Returns

void

Notes

Graph View