useConnection

Source on GitHub

The useConnection hook returns the current connection state when there is an active connection interaction. If no connection interaction is active, it returns null for every property. A typical use case for this hook is to colorize handles based on a certain condition (e.g. if the connection is valid or not).

import { useConnection } from '@xyflow/react';
 
export default function () {
  const connection = useConnection();
 
  return (
    {connection &&
      <div>
        Someone is trying to make a connection from {connection.fromNode} to this one.
      </div>
    }
    {!connection &&
      <div>
        There are currently no incoming connections!
      </div>
    }
    )
}

Signature

Name	Type
#Params
#`selector?`	`(connection: ConnectionState<InternalNode<NodeType>>) => T` An optional selector function used to extract a slice of the ConnectionState data. Using a selector can prevent component re-renders where data you don't otherwise care about might change. If a selector is not provided, the entire ConnectionState object is returned unchanged.
#Returns
#	`T`

Hooks Utils