<Handle />

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


import { Handle, Position } from '@xyflow/react';
 
export const 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 \| null` Id of the handle.
`type`	`HandleType` Type of the handle.	`"source"`
`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`.	`Position.Top`
`isConnectable`	`boolean` Should you be able to connect to/from this handle.	`true`
`isConnectableStart`	`boolean` Dictates whether a connection can start from this handle.	`true`
`isConnectableEnd`	`boolean` Dictates whether a connection can end on this handle.	`true`
`isValidConnection`	`IsValidConnection` 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.
`onConnect`	`OnConnect` Callback called when connection is made
`...props`	`Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "id">`