Reference
Hooks
useHandleConnections()

useHandleConnections

Source on GitHub (opens in a new tab)

This hook returns an array connections on a specific handle or handle type.

import { useHandleConnections } from '@xyflow/react';
 
export default function () {
  const connections = useHandleConnections({ type: 'target', id: 'my-handle' });
 
  return (
    <div>There are currently {connections.length} incoming connections!</div>
  );
}

Signature

#Params
#type
"source" | "target"
What type of handle connections do you want to observer?
#id?
string
ID of the handle
#nodeId?
string
ID of the node, filled in automatically if used inside custom node
#onConnect?
(connections: Connection[]) => void
#onDisconnect?
(connections: Connection[]) => void
#Returns
#
useEdgesState()useKeyPress()