Reference
useConnection()

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

#Returns