Skip to main content

<Handle />

To learn what a Handle is, you can check out the Handle section in the terms and definitions.

We export a Handle component as a helper for your custom nodes:

import { Handle, Position } from 'reactflow';

const targetHandleWithValidation = (
  <Handle
    type="target"
    position={Position.Left}
    isValidConnection={(connection) => connection.source === 'some-id'}
    onConnect={(params) => console.log('handle onConnect', params)}
    style={{ background: '#fff' }}
  />
);

Prop Types​

type?​

Description:
Defines the handle type
Type:
'source' | 'target'
Default:
'source'

id?​

Description:
You only need this when you have multiple source or target handles (otherwise the node id is used)
Type:
string

position?​

Description:
Handle position
Type:
'left' | 'right' | 'top' | 'bottom'
Default:
'top' if type == 'target' | 'bottom' if type == 'source'

onConnect?​

Description:
Gets triggered on connect. This callback only gets executed on source handles.
Type:
(connection: Connection) => void

isValidConnection?​

Description:
Can be used to perform custom validation of a connection. This callback will not be executed when edges are updated: where possible, prefer theisValidConnectioncallback passed to the ReactFlow component.
Type:
(connection: Connection) => boolean

isConnectable?​

Description:
boolean (this prop gets passed to your custom node component)
Type:
boolean
Default:
true

isConnectableStart?​

Description:
if set to false, you can't start a connection from this handle
Type:
boolean
Default:
true

isConnectableEnd?​

Description:
if set to false, you can't end a connection at this handle
Type:
boolean
Default:
true

style?​

Description:
Controls style attributes
Type:
CSSProperties

className​

Description:
Additional class name
Type:
string

Typescript​

The interface of the Handle Prop Types are exported as HandleComponentProps.

Validation​

The handle receives the additional class names connecting when the connection line is above the handle and valid if the connection is valid. You can find an example which uses these classes here.

Multiple Handles​

If you need multiple source or target handles you can achieve this by creating a custom node. Normally you just use the id of a node for the source or target of an edge. If you have multiple source or target handles you need to pass an id to these handles. These ids can be used by an edge with the sourceHandle and targetHandle options, so that you can connect a specific handle. If you have a node with an id = 1 and a handle with an id = a you can connect this handle by using the node source=1 and the sourceHandle=a.

Dynamic Handles​

If you are programmatically changing the position or number of handles in your custom node, you need to update the node internals with the useUpdateNodeInternals hook.

You can find an example of how to implement a custom node with multiple handles in the custom node guide or in the custom node example.

Custom Handle Styles​

Since the handle is a div, you can use CSS to style it or pass a style prop to customize a Handle. You can see this in the Add Node On Edge Drop and Simple Floating Edges examples.