Skip to main content

Custom Connection Line

The connection line is the line that gets drawn while you connect two nodes with each other. You can adjust the connection line by using the props documented in the connection line options section. If you want to implement a custom connection line, you can pass a React component to the connectionLineComponent prop. The connection line component will receive the following props:

Connection Line Component Props​

fromX​

Description:
x position of the source handle
Type:
number

fromY​

Description:
y position of the source handle
Type:
number

fromPosition​

Description:
position of the source handle
Type:
Position

toX​

Description:
x position of the target handle
Type:
number

toY​

Description:
y position of the target handle
Type:
number

toPosition​

Description:
position of the target handle
Type:
Position

connectionLineType​

Description:
type
Type:
ConnectionLineType

connectionLineStyle​

Description:
style
Type:
CSS.Properties

fromNode​

Description:
the node where the connection comes from
Type:
Node

fromHandle​

Description:
the handle where the connection comes from
Type:
HandleElement

You can find an implementation in the custom connection line example.