Types

Connection

The Connection type is the basic minimal description of an Edge between two nodes. The addEdge util can be used to upgrade a Connection to an Edge.

ConnectionLineComponent

Custom React component for rendering the connection line during edge creation.

ConnectionLineComponentProps

If you want to render a custom component for connection lines, you can set the connectionLineComponent prop on the ReactFlow component. The ConnectionLineComponentProps are passed to your custom component.

ConnectionLineType

If you set the connectionLineType prop on your ReactFlow component, it will dictate the style of connection line rendered when creating new edges.

ConnectionMode

Specifies the rules for how connections between nodes are established.

ConnectionState

Data about an ongoing connection.

CoordinateExtent

A coordinate extent represents two points in a coordinate system: one in the top left corner and one in the bottom right corner. It is used to represent the bounds of nodes in the flow or the bounds of the viewport.

DefaultEdgeOptions

Many properties on an Edge are optional. When a new edge is created, the properties that are not provided will be filled in with the default values passed to the defaultEdgeOptions prop of the ReactFlow component.

DeleteElements

DeleteElements deletes nodes and edges from the flow and return the deleted edges and nodes asynchronously.

Edge

Where a Connection is the minimal description of an edge between two nodes, an `Edge` is the complete description with everything React Flow needs to know in order to render it.

EdgeChange

The onEdgesChange callback takes an array of EdgeChange objects that you should use to update your flow's state. The EdgeChange type is a union of four different object types that represent that various ways an edge can change in a flow.

EdgeMarker

Edges can optionally have markers at the start and end of an edge. The EdgeMarker type is used to configure those markers! Check the docs for MarkerType for details on what types of edge marker are available.

EdgeMouseHandler

The EdgeMouseHandler type defines the callback function that is called when mouse events occur on an edge.

EdgeProps

When you implement a custom edge it is wrapped in a component that enables some basic functionality. Your custom edge component receives the following props:

EdgeTypes

The EdgeTypes type is used to define custom edge types.

FitViewOptions

When calling fitView these options can be used to customize the behavior. For example, the duration option can be used to transform the viewport smoothly over a given amount of time.

Handle

Handle attributes like id, position, and type.

HandleConnection

The HandleConnection type is a Connection that includes the edgeId.

InternalNode

The InternalNode is an extension of the base Node type with additional properties React Flow uses internally for rendering.

IsValidConnection

Function type that determines whether a connection between nodes is valid.

KeyCode

Represents keyboard key codes or combinations.

MarkerType

Edges may optionally have a marker on either end. The MarkerType type enumerates the options available to you when configuring a given marker.

MiniMapNodeProps

The MiniMapNodeProps type defines the properties for nodes in a minimap component.

Node

The Node type represents everything React Flow needs to know about a given node. Many of these properties can be manipulated both by React Flow or by you, but some such as width and height should be considered read-only.

NodeChange

The onNodesChange callback takes an array of NodeChange objects that you should use to update your flow's state. The NodeChange type is a union of six different object types that represent that various ways an node can change in a flow.

NodeConnection

The NodeConnection type is a Connection that includes the edgeId.

NodeHandle

The NodeHandle type is used to define a handle for a node if server side rendering is used.

NodeMouseHandler

The NodeMouseHandler type defines the callback function that is called when mouse events occur on a node.

NodeOrigin

The origin of a Node determines how it is placed relative to its own coordinates.

NodeProps

When you implement a custom node it is wrapped in a component that enables basic functionality like selection and dragging. Your custom node receives the following props:

NodeTypes

The NodeTypes type is used to define custom node types.

OnBeforeDelete

The OnBeforeDelete type defines the callback function that is called before nodes or edges are deleted.

OnConnect

Callback function triggered when a new connection is created between nodes.

OnConnectEnd

Callback function triggered when finishing or canceling a connection attempt between nodes.

OnConnectStart

Callback function triggered when starting to create a connection between nodes.

OnDelete

The OnDelete type defines the callback function that is called when nodes or edges are deleted.

OnEdgesChange

OnEdgesDelete

The OnEdgesDelete type defines the callback function that is called when edges are deleted.

OnError

The OnError type defines the callback function that is called when an error occurs.

OnInit

The OnInit type defines the callback function that is called when the ReactFlow instance is initialized.

OnMove

Invoked when the viewport is moved, such as by panning or zooming.

OnNodeDrag

The OnNodeDrag type defines the callback function that is called when a node is being dragged.

OnNodesChange

OnNodesDelete

The OnNodesDelete type defines the callback function that is called when nodes are deleted.

OnReconnect

Callback function triggered when an existing edge is reconnected to a different node or handle.

OnSelectionChangeFunc

Called whenever the selection of nodes or edges changes in the flow diagram.

PanOnScrollMode

Configures how the viewport responds to scroll events, allowing free, vertical, or horizontal panning.

PanelPosition

This type is mostly used to help position things on top of the flow viewport. For example both the MiniMap and Controls components take a position prop of this type.

Position

While PanelPosition can be used to place a component in the corners of a container, the Position enum is less precise and used primarily in relation to edges and handles.

ProOptions

By default, we render a small attribution in the corner of your flows that links back to the project.

ReactFlowInstance

The ReactFlowInstance provides a collection of methods to query and manipulate the internal state of your flow. You can get an instance by using the useReactFlow hook or attaching a listener to the onInit event.

ReactFlowJsonObject

A JSON-compatible representation of your flow. You can use this to save the flow to a database for example and load it back in later.

Rect

The Rect type defines a rectangle with dimensions and a position.

ResizeParams

The ResizeParams type is used to type the various events that are emitted by the NodeResizer component. You'll sometimes see this type extended with an additional direction field too.

SelectionDragHandler

Handles drag events for selected nodes during interactive operations.

SelectionMode

Controls how nodes are selected in the flow diagram, offering either full or partial selection behavior.

SnapGrid

The SnapGrid type defines the grid size for snapping nodes on the pane.

Viewport

Internally, React Flow maintains a coordinate system that is independent of the rest of the page. The Viewport type tells you where in that system your flow is currently being display at and how zoomed in or out it is.

XYPosition

All positions are stored in an object with x and y coordinates.

ZIndexMode

The ZIndexMode type is used to define how z-indexing is calculated for nodes and edges.