<Handle />

The <Handle /> component is used in your custom nodes to define connection points.


import { Handle, Position } from '@xyflow/react';
 
export CustomNode = ({ data }) => {
  return (
    <>
      <div style={{ padding: '10px 20px' }}>
        {data.label}
      </div>
 
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
    </>
  );
};

Props

For TypeScript users, the props type for the <Handle /> component is exported as HandleProps.

Name	Type	Default
#`id?`	`string`
#`type`	`"source" \| "target"`
#`position`	`Position` The position of the handle relative to the node. In a horizontal flow source handles are typically Position.Right and in a vertical flow they are typically Position.Top.
#`isConnectable?`	`boolean`	`true`
#`isConnectableStart?`	`boolean` Dictates whether a connection can start from this handle.	`type === "source"`
#`isConnectableEnd?`	`boolean` Dictates whether a connection can end on this handle.	`type === "target"`
#`onConnect?`	`(connection: Connection) => void`
#`isValidConnection?`	`(connection: Connection) => boolean` Called when a connection is dragged to this handle. You can use this callback to perform some custom validation logic based on the connection target and source, for example. Where possible, we recommend you move this logic to the isValidConnection prop on the main ReactFlow component for performance reasons.