Types

BackgroundVariant

The three variants are exported as an enum for convenience. You can either import the enum and use it like BackgroundVariant.Lines or you can use the raw string value directly.

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.

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.

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.

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.

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:

FitViewOptions

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

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

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.

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:

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. Anyone is free to remove this attribution whether they're a Pro subscriber or not but we ask that you take a quick look at our removing attribution guide before doing so.