Reconnect Edge

An edge is reconnectable by dragging it to another handle if you are using the onReconnect handler prop. The handler gets called after the edge gets dropped to a new handle. You can use the reconnectEdge helper function to update your edges state accordingly.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

A couple of properties interact with one another to determine whether an edge is updatable or not:

• By default the edgesReconnectable is set to true.

• For edges to actually be draggable, though, it is also necessary to define a onReconnect handler.

• Individual edges can refine or override the edgesReconnectable prop by setting their updatable property.

  • true means the edge is updatable even if edgesReconnectable

  • "source" or "target" means the edge is updatable only from the source or target handle regardless of the edgesReconnectable prop.

  • false means the edge is not updatable even if edgesReconnectable is set to true.