Skip to main content

Props List

This is the list of props you can pass to the <ReactFlow /> component.

import ReactFlow from 'reactflow';

Typescript​

The interface of the ReactFlow Prop types is exported as ReactFlowProps. You can use it in your code as follows:

import { ReactFlowProps } from 'reactflow';
caution

When you pass one of these props: nodeTypes, edgeTypes, deleteKeyCode (as an array), selectionKeyCode (as an array), multiselectionKeyCode (as an array), snapGrid or any event handler, you need to define it outside of the component or memoize it in order to prevent unnecessary re-renderings and bugs!

Basic Props​

nodes?​

Description:
Array of nodes (for a controlled flow)
Type:
Node[]
Default:
[]

edges?​

Description:
Array of edges (for a controlled flow)
Type:
Edge[]
Default:
[]

defaultNodes?​

Description:
Array of nodes (for an uncontrolled flow)
Type:
Node[]
Default:
[]

defaultEdges?​

Description:
Array of edges (for an uncontrolled flow)
Type:
Edge[]
Default:
[]

onNodesChange?​

Description:
Called on drag, select and remove - handler for adding interactivity for a controlled flow
Type:
(nodeChanges: NodeChange[]) => void

onEdgesChange?​

Description:
Called on select and remove - handler for adding interactivity for a controlled flow
Type:
(edgeChanges: EdgeChange[]) => void

onConnect?​

Description:
Called when user connects two nodes in a controlled flow
Type:
(connection: Connection) => void

nodeTypes?​

Description:
Object with node types
Type:
{ [key: string]: React.ComponentType<NodeProps> }
Default:
{ input: InputNode, default: DefaultNode, output: OutputNode, group: GroupNode }

edgeTypes?​

Description:
Object with edge types
Type:
{ [key: string]: React.ComponentType<EdgeProps> }
Default:
{ default: BezierEdge, straight: StraightEdge, step: StepEdge, smoothstep: SmoothStepEdge }

nodeOrigin?​

Description:
Position origin [x-origin, y-origin]. center = [0.5, 0.5], bottom-right = [1, 1]. Values should be between 0 and 1.
Type:
[number, number]
Default:
[0,0]

style?​

Description:
CSS properties for the wrapper div
Type:
CSSProperties

className?​

Description:
Additional class name for the wrapper div
Type:
string

Flow View​

fitView?​

Description:
Fits the view once to make all nodes visible
Type:
boolean
Default:
false

fitViewOptions?​

Description:
Options that are passed to the initial fitView
Type:
FitViewOptions

minZoom?​

Description:
Minimum zoom level
Type:
number
Default:
0.5

maxZoom?​

Description:
Maximum zoom level
Type:
number
Default:
2

defaultViewport?​

Description:
Default viewport position and zoom level
Type:
Viewport
Default:
{ x: 0, y: 0, zoom: 1 }

snapGrid?​

Description:
Snap grid gap
Type:
[number, number]
Default:
[25, 25]

snapToGrid?​

Description:
If true, snap grid is enabled
Type:
boolean
Default:
false

onlyRenderVisibleElements?​

Description:
If true, only nodes and edges inside the viewport are rendered
Type:
boolean
Default:
false

translateExtent?​

Description:
Passed to the d3-zoom translateExtent option
Type:
CoordinateExtent
Default:
[[-∞, -∞], [+∞, +∞]]

nodeExtent?​

Description:
Defines the extent for the node positions
Type:
CoordinateExtent
Default:
[[-∞, -∞], [+∞, +∞]]

preventScrolling?​

Description:
If true, default browser scroll behaviour is prevented
Type:
boolean
Default:
true

attributionPosition?​

Description:
Position of the "React Flow" attribution
Type:
PanelPosition
Default:
'bottom-right'

Edge Specific Props​

elevateEdgesOnSelect?​

Description:
Edges get a higher zIndex if this is true and a connected node is selected
Type:
boolean
Default:
false

defaultMarkerColor?​

Description:
Default marker color
Type:
string
Default:
'#b1b1b7'

defaultEdgeOptions?​

Description:
Edge options that apply for all edges
Type:
DefaultEdgeOptions

edgeUpdaterRadius?​

Description:
The radius around the edge end which can be used for updating the edge
Type:
number
Default:
10

edgesUpdatable?​

Description:
Defines if edges can be updated. onEdgeUpdate has to be set too.
Type:
boolean
Default:
true

Event Handlers​

caution

Please wrap all event handlers that you are passing to <ReactFlow /> with a useCallback hook or define it outside of the component.

General​

onInit?​

Description:
Called when React Flow is initialized
Type:
(reactFlowInstance: ReactFlowInstance) => void

onError?​

Description:
Called when an error happens: Error codes
Type:
(code: string, message: string) => void

Nodes​

onNodeClick?​

Description:
Called when user clicks a node
Type:
(event: React.MouseEvent, node: Node) => void

onNodeDragStart?​

Description:
Node drag start
Type:
(event: React.MouseEvent, node: Node, nodes: Node[]) => void

onNodeDrag?​

Description:
Node drag
Type:
(event: React.MouseEvent, node: Node, nodes: Node[]) => void

onNodeDragStop?​

Description:
Node drag stop
Type:
(event: React.MouseEvent, node: Node, nodes: Node[]) => void

onNodeMouseEnter?​

Description:
Node mouse enter
Type:
(event: React.MouseEvent, node: Node) => void

onNodeMouseMove?​

Description:
Node mouse move
Type:
(event: React.MouseEvent, node: Node) => void

onNodeMouseLeave?​

Description:
Node mouse leave
Type:
(event: React.MouseEvent, node: Node) => void

onNodeContextMenu?​

Description:
Node context menu
Type:
(event: React.MouseEvent, node: Node) => void

onNodeDoubleClick?​

Description:
Node double click
Type:
(event: React.MouseEvent, node: Node) => void

onNodesDelete?​

Description:
Called when nodes get deleted
Type:
(nodes: Node[]) => void

onNodesChange?​

Description:
Handler for adding interactivity for a controlled flow
Type:
(nodeChanges: NodeChange[]) => void

Edges​

onEdgeClick?​

Description:
Called when user clicks an edge
Type:
(event: React.MouseEvent, edge: Edge) => void

onEdgeDoubleClick?​

Description:
Called when user clicks double an edge
Type:
(event: React.MouseEvent, edge: Edge) => void

onEdgeMouseEnter?​

Description:
Edge mouse enter
Type:
(event: React.MouseEvent, edge: Edge) => void

onEdgeMouseMove?​

Description:
Edge mouse move
Type:
(event: React.MouseEvent, edge: Edge) => void

onEdgeMouseLeave?​

Description:
Edge mouse leave
Type:
(event: React.MouseEvent, edge: Edge) => void

onEdgeContextMenu?​

Description:
Called when user does a right-click on an edge
Type:
(event: React.MouseEvent, edge: Edge) => void

onEdgeUpdate?​

Description:
Called when the end of an edge gets dragged to another source or target
Type:
(oldEdge: Edge, newConnection: Connection) => void

onEdgeUpdateStart?​

Description:
Called when user starts to update an edge
Type:
(event: React.MouseEvent, edge: Edge, handleType: HandleType) => void

onEdgeUpdateEnd?​

Description:
Called when user ends an edge update (for TS users: this is a normal MouseEvent and not a React.MouseEvent like the other ones).
Type:
(event: React.MouseEvent, edge: Edge, handleType: HandleType) => void

onEdgesDelete?​

Description:
Called when edges get deleted
Type:
(edges: Edge[]) => void

onEdgesChange?​

Description:
Handler for adding interactivity for a controlled flow
Type:
(edgeChanges: EdgeChange[]) => void

Connections​

onConnect?​

Description:
Called when user connects two nodes
Type:
(connection: Connection) => void

onConnectStart?​

Description:
Called when user starts to drag connection line
Type:
(event: React.MouseEvent, params: OnConnectStartParams) => void

onConnectEnd?​

Description:
Called after user stops or connects nodes (called after onConnect)
Type:
(event: React.MouseEvent) => void

onClickConnectStart?​

Description:
Called when user starts to do a connection by click
Type:
(event: React.MouseEvent, params: OnConnectStartParams) => void

onClickConnectEnd?​

Description:
Called after user stops a connection by click (called after onConnect)
Type:
(event: React.MouseEvent) => void

isValidConnection​

Description:
Callback that returns true/false if a connection is valid/invalid.
Type:
(edge: Edge) => boolean
Default:
undefined

Pane​

onMove?​

Description:
Called when user is panning or zooming
Type:
(event: MouseEvent, viewport: Viewport) => void

onMoveStart?​

Description:
Called when user starts panning or zooming
Type:
(event: MouseEvent, viewport: Viewport) => void

onMoveEnd?​

Description:
Called when user ends panning or zooming
Type:
(event: MouseEvent, viewport: Viewport) => void

onPaneClick?​

Description:
Called when user clicks directly on the canvas
Type:
(event: React.MouseEvent) => void

onPaneMouseEnter?​

Description:
Called when user enters the canvas with the mouse
Type:
(event: React.MouseEvent) => void

onPaneMouseMove?​

Description:
Called when user clicks directly on the canvas
Type:
(event: React.MouseEvent) => void

onPaneMouseLeave?​

Description:
Called when user clicks leaves the canvas with the mouse
Type:
(event: React.MouseEvent) => void

onPaneContextMenu?​

Description:
Called when user does a right-click on the canvas
Type:
(event: React.MouseEvent) => void

onPaneScroll?​

Description:
Called when user scrolls pane (only works when zoomOnScroll is set to `false)
Type:
(event: React.MouseEvent) => void

Selection​

onSelectionChange?​

Description:
Called when user selects one or multiple elements
Type:
(params: OnSelectionChangeParams) => void

onSelectionDragStart?​

Description:
Called when user starts to drag a selection
Type:
(event: React.MouseEvent, nodes: Node[]) => void

onSelectionDrag?​

Description:
Called when user drags a selection
Type:
(event: React.MouseEvent, nodes: Node[]) => void

onSelectionDragStop?​

Description:
Called when user stops to drag a selection
Type:
(event: React.MouseEvent, nodes: Node[]) => void

onSelectionContextMenu?​

Description:
Called when user does a right-click on a selection
Type:
(event: React.MouseEvent, nodes: Node[]) => void

onSelectionStart?​

Description:
Gets called when user starts a selection.
Type:
() => void

onSelectionEnd?​

Description:
Gets called when user ends a selection.
Type:
() => void

Interaction​

nodesDraggable?​

Description:
This applies to all nodes. You can also change the behavior of a specific node with the draggable node option. If you want to use mouse handlers for non-draggable nodes, you need to add the class name"nopan" to the node.
Type:
boolean
Default:
true

nodesConnectable?​

Description:
This applies to all nodes. You can also change the behavior of a specific node with the connectable node option.
Type:
boolean
Default:
true

nodesFocusable?​

Description:
If true, you can focus a node by pressing Tab and select it with Enter. This applies to all nodes. You can also change the behavior of a specific node with the focusable node option.
Type:
boolean
Default:
true

edgesFocusable?​

Description:
If true, you can focus an edge by pressing Tab and select it with Enter. This applies to all edges. You can also change the behavior of a specific edge with the focusable edge option.
Type:
boolean
Default:
true

elementsSelectable?​

Description:
This applies to all nodes and edges. You can also change the behavior of a specific node with the selectable node option.
Type:
boolean
Default:
true

autoPanOnConnect?​

Description:
Auto pan when connection line is dragged to the edge of the pane
Type:
boolean
Default:
true

autoPanOnNodeDrag?​

Description:
Auto pan when node is dragged to the edge of the pane
Type:
boolean
Default:
true

panOnDrag?​

Description:
Enables pan on drag. Besides a boolean you can pass an array of mouse buttons to enable panning.
Type:
boolean | number[]
Default:
true

selectionOnDrag?​

Description:
Starts to draw a selection on drag
Type:
boolean
Default:
false

selectionMode?​

Description:
Decide if nodes needs to be fully (SelectionMode.Full) inside the selection or just partially (SelectionMode.Partial).
Type:
SelectionMode
Default:
SelectionMode.Full

panOnScroll?​

Description:
Move the graph while keeping the zoomlevel using mousewheel or trackpad. OverwriteszoomOnScroll option.
Type:
boolean
Default:
false

panOnScrollSpeed?​

Description:
Controls how fast the canvas is moved while using the mousewheel. Only has an effect if panOnScroll is enabled
Type:
number

panOnScrollMode?​

Description:
Enables certain scroll directions
Type:
PanOnScrollMode
Default:
'free'

zoomOnScroll?​

Description:
Zoom the graph in and out using the mousewheel or trackpad
Type:
boolean
Default:
true

zoomOnPinch?​

Description:
Zoom the graph in and out using pinch
Type:
boolean
Default:
true

zoomOnDoubleClick?​

Description:
Enables zoom on double click
Type:
boolean
Default:
true

selectNodesOnDrag?​

Description:
Enables to select nodes on drag
Type:
boolean
Default:
true

elevateNodesOnSelect?​

Description:
Nodes get a higher zIndex if they are selected and this prop is set to true
Type:
boolean
Default:
true

connectOnClick?​

Description:
Enables to create connections on touch devices and via mouse click
Type:
boolean
Default:
true

connectionMode?​

Description:
'strict' (only source to target connections are possible) or 'loose' (source to source and target to target connections are allowed)
Type:
ConnectionMode
Default:
'strict'

disableKeyboardA11y?​

Description:
With this prop you can disable the keyboard accessibility features
Type:
boolean
Default:
false

Connection Line​

connectionRadius?​

Description:
Radius around a handle where you can drop the connection line to create a new edge
Type:
number
Default:
20

connectionLineType?​

Description:
Available types are: "default" (bezier), "smoothstep", "step" and "straight".
Type:
ConnectionLineType
Default:
'default'

connectionLineStyle?​

Description:
Connection style as SVG attributes
Type:
CSSProperties

connectionLineComponent?​

Description:
Custom connection line component(example)
Type:
React.Component

connectionLineWrapperStyles?​

Description:
Styles for the connection line SVG wrapper
Type:
CSSProperties

Keys​

Use these props to disable or change the node and edge delete key (default is backspace) or the keys to draw a selection box:

deleteKeyCode?​

Description:
Key(s) that trigger a remove handler (when you pass an array, memoize or define it outside the component). You can set it to null to disable functionality.
Type:
string | string[] | null
Default:
'Backspace'

selectionKeyCode?​

Description:
While pressing the selectionKeyCode and dragging the mouse you can create a selection for multiple nodes and edges. You can set it to null to disable functionality
Type:
string | string[] | null
Default:
'Shift'

multiSelectionKeyCode?​

Description:
While pressing the multiSelectionKeyCode you can select multiple nodes and edges with a click. You can set it to null to disable functionality
Type:
string | string[] | null
Default:
'Meta'

zoomActivationKeyCode?​

Description:
While pressing the zoomActivationKeyCode you can zoom even if panOnScroll=true orzoomOnScroll=false. You can set it to null to disable functionality
Type:
string | string[] | null
Default:
'Meta'

panActivationKeyCode?​

Description:
While pressing the panActivationKeyCode you can pan even if panOnScroll=false. You can set it to null to disable functionality
Type:
string | string[] | null
Default:
'Space'

Pro Options​

info

These options are only intended for subscribers of React Flow Pro. If you’re considering removing the attribution, please make sure to read our Remove Attribution guide first.

proOptions?​

Description:
This object contains options that are only intended for subscribers of React Flow Pro.
Type:
object (see below)

proOptions.hideAttribution?​

Description:
This flag removes the attribution from the React Flow renderer. If you’re considering removing the attribution please make sure to read the Remove Attribution Guide first.
Type:
boolean
Default:
false