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

edges

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

defaultNodes

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

defaultEdges

Description:
Array of edges (for an uncontrolled flow)
Type:
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
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
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:
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
Default:
undefined

edgeUpdaterRadius

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

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

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

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

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

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

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

panOnDrag

Description:
enables pan on drag
Type:
boolean
Default:
true

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

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

connectionLineType

Description:
Available types are: "default" (bezier), "smoothstep", "step" and "straight".
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'

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