📣 Take the 2024 React Flow Developer Survey
ExamplesInteraction
Connection Events

Connection Events

React Flow emits different events during the connection process that you can use to update your UI or your flow in different ways. The example below demonstrates which events are fired and when.

import React, { useCallback } from 'react';
import { ReactFlow, Background } from '@xyflow/react';
 
import { useState } from 'react';
import { useEffect } from 'react';
 
import '@xyflow/react/dist/style.css';
 
 
const initialNodes = [
  { id: 'a', position: { x: -100, y: 0 }, data: { label: 'A' } },
  { id: 'b', position: { x: 100, y: 0 }, data: { label: 'B' } },
  { id: 'c', position: { x: 0, y: 100 }, data: { label: 'C' } },
];
 
const initialEdges = [{ id: 'b->c', source: 'b', target: 'c' }];
 
const Flow = () => {
  const [events, setEvents] = useState({
    onReconnectStart: false,
    onConnectStart: false,
    onConnect: false,
    onReconnect: false,
    onConnectEnd: false,
    onReconnectEnd: false,
  });
 
  const onReconnectStart = useCallback(() => {
    console.log('onReconnectStart');
    setEvents({
      onReconnectStart: true,
      onConnectStart: false,
      onConnect: false,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onConnectStart = useCallback(() => {
    console.log('onConnectStart');
    setEvents((events) => ({
      ...events,
      onConnectStart: true,
      onConnect: false,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    }));
  }, []);
 
  const onConnect = useCallback(() => {
    console.log('onConnect');
    setEvents({
      onReconnectStart: false,
      onConnectStart: false,
      onConnect: true,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onReconnect = useCallback(() => {
    console.log('onReconnect');
    setEvents({
      onReconnectStart: false,
      onConnectStart: false,
      onConnect: false,
      onReconnect: true,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onConnectEnd = useCallback(() => {
    setEvents((events) => ({
      ...events,
      onReconnectStart: false,
      onConnectStart: false,
      onConnectEnd: true,
    }));
  }, []);
 
  const onReconnectEnd = useCallback(() => {
    console.log('onReconnectEnd');
    setEvents((events) => ({
      ...events,
      onReconnectStart: false,
      onConnectStart: false,
      onReconnectEnd: true,
    }));
  }, []);
 
  useEffect(() => {
    if (!events.onReconnectEnd && !events.onConnectEnd) return;
 
    let timer = window.setTimeout(() => {
      setEvents({
        onReconnectStart: false,
        onConnectStart: false,
        onConnect: false,
        onReconnect: false,
        onConnectEnd: false,
        onReconnectEnd: false,
      });
    }, 500);
 
    return () => window.clearTimeout(timer);
  });
 
  return (
    <>
      <ReactFlow
        nodes={initialNodes}
        edges={initialEdges}
        edgesReconnectable={true}
        onConnectStart={onConnectStart}
        onConnect={onConnect}
        onConnectEnd={onConnectEnd}
        onReconnectStart={onReconnectStart}
        onReconnect={onReconnect}
        onReconnectEnd={onReconnectEnd}
        fitView
        style={{ backgroundColor: "#F7F9FB" }}
        >
          <Background />
        </ReactFlow>
      <div id="event-list">
        {Object.entries(events).map(([name, active]) => (
          <p key={name} style={{ opacity: active ? 1 : 0.2 }}>
            {name}
          </p>
        ))}
      </div>
    </>
  );
};
 
export default Flow;

For a new connection created by dragging from a handle, the following events are called in order:

  • onConnectStart is called with the mouse event and an object containing the source node, potentially the source handle id, and the handle type.

  • onConnect is only called when the connection is released on a handle that is connectable. It is called with a complete connection object containing the source and target node, and the source and target handle ids if present.

  • onConnectEnd is called when a connection is released, regardless of whether it was successful or not. It is called with the mouse event.

When an edge is reconnected by dragging an existing edge, the following events are called in order:

You can see many of these events in use in our add node on edge drop and temporary edges examples!

Feature OverviewDark Mode