useHandleConnections()

Warning

useHandleConnections is deprecated in favor of the more capable useNodeConnections.

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

Parameters:

Name	Type	Default
`[0].type`	`'source' \| 'target'` What type of handle connections do you want to observe?
`[0].id`	`string \| null` The handle id (this is only needed if the node has multiple handles of the same type).
`[0].nodeId`	`string` If node id is not provided, the node id from the `NodeIdContext` is used.
`[0].onConnect`	`(connections: Connection[]) => void` Gets called when a connection is established.
`[0].onDisconnect`	`(connections: Connection[]) => void` Gets called when a connection is removed.

Returns:

HandleConnection[]