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
Default:
undefined

onEdgesChange​

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

onConnect​

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

nodeTypes​

Description:
Object with node types
Type:
object
Default:
{ input: InputNode, default: DefaultNode, output: OutputNode, group: GroupNode }

edgeTypes​

Description:
Object with edge types
Type:
object
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]
Type:
[number, number] (number between 0 - 1)
Default:
[0,0]}

style​

Description:
CSS properties for the wrapper div
Type:
CSSProperties
Default:
undefined

className​

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

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
Default:
undefined

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 [[number, number], [number, number]]
Default:
[[-∞, -∞], [+∞, +∞]]

nodeExtent​

Description:
Defines the extent for the node positions
Type:
CoordinateExtent [[number, number], [number, number]]
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 ('top-left'`, 'top-center', 'top-right', 'bottom-left', 'bottom-center' or 'bottom-right')
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
Default:
undefined

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
Default:
undefined

onError​

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

Nodes​

onNodeClick​

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

onNodeDragStart​

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

onNodeDrag​

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

onNodeDragStop​

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

onNodeMouseEnter​

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

onNodeMouseMove​

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

onNodeMouseLeave​

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

onNodeContextMenu​

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

onNodeDoubleClick​

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

onNodesDelete​

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

onNodesChange​

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

Edges​

onEdgeClick​

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

onEdgeDoubleClick​

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

onEdgeMouseEnter​

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

onEdgeMouseMove​

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

onEdgeMouseLeave​

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

onEdgeContextMenu​

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

onEdgeUpdate​

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

onEdgeUpdateStart​

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

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
Default:
undefined

onEdgesDelete​

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

onEdgesChange​

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

Connections​

onConnect​

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

onConnectStart​

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

onConnectEnd​

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

onClickConnectStart​

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

onClickConnectEnd​

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

Pane​

onMove​

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

onMoveStart​

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

onMoveEnd​

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

onPaneClick​

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

onPaneMouseEnter​

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

onPaneMouseMove​

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

onPaneMouseLeave​

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

onPaneContextMenu​

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

onPaneScroll​

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

Selection​

onSelectionChange({ nodes, edges }: OnSelectionChangeParams)​

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

onSelectionDragStart​

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

onSelectionDrag​

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

onSelectionDragStop​

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

onSelectionContextMenu​

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

onSelectionStart​

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

onSelectionEnd​

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

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
Default:
undefined

panOnScrollMode​

Description:
Enables certain scroll directions
Type:
PanOnScrollMode ('free', 'vertical' or 'horizontal')
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 ('strict' or 'loose')
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
Default:
undefined

connectionLineComponent​

Description:
Custom connection line component(example)
Type:
React component
Default:
undefined

connectionLineWrapperStyles​

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

Keys​

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 or string[] or 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 or string[] or 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 or string[] or 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 or string[] or 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 or string[] or 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
Default:
undefined

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