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';
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
edges
defaultNodes
defaultEdges
onNodesChange
(nodeChanges: NodeChange[]) => void
undefined
onEdgesChange
(edgeChanges: EdgeChange[]) => void
undefined
onConnect
(connection: Connection) => void
undefined
nodeTypes
object
{ input: InputNode, default: DefaultNode, output: OutputNode, group: GroupNode }
edgeTypes
object
{ default: BezierEdge, straight: StraightEdge, step: StepEdge, smoothstep: SmoothStepEdge }
nodeOrigin
[0.5, 0.5]
, bottom-right = [1, 1]
[number, number] (number between 0 - 1)
[0,0]}
style
CSSProperties
undefined
className
string
undefined
Flow View
fitView
boolean
false
fitViewOptions
minZoom
number
0.5
maxZoom
number
2
defaultViewport
snapGrid
[number, number]
[25, 25]
snapToGrid
boolean
false
onlyRenderVisibleElements
boolean
false
translateExtent
CoordinateExtent [[number, number], [number, number]]
[[-∞, -∞], [+∞, +∞]]
nodeExtent
CoordinateExtent [[number, number], [number, number]]
[[-∞, -∞], [+∞, +∞]]
preventScrolling
boolean
true
attributionPosition
PanelPosition ('top-left'`, 'top-center', 'top-right', 'bottom-left', 'bottom-center' or 'bottom-right')
'bottom-right'
Edge Specific Props
elevateEdgesOnSelect
boolean
false
defaultMarkerColor
string
#b1b1b7
defaultEdgeOptions
edgeUpdaterRadius
number
10
edgesUpdatable
boolean
true
Event Handlers
Please wrap all event handlers that you are passing to <ReactFlow />
with a useCallback
hook or define it outside of the component.
General
onInit
(reactFlowInstance: ReactFlowInstance) => void
undefined
onError
(code: string, message: string) => void
undefined
Nodes
onNodeClick
(event: React.MouseEvent, node: Node) => void
undefined
onNodeDragStart
undefined
onNodeDrag
undefined
onNodeDragStop
undefined
onNodeMouseEnter
onNodeMouseMove
onNodeMouseLeave
onNodeContextMenu
onNodeDoubleClick
onNodesDelete
onNodesChange
(nodeChanges: NodeChange[]) => void
undefined
Edges
onEdgeClick
(event: React.MouseEvent, edge: Edge) => void
undefined
onEdgeDoubleClick
(event: React.MouseEvent, edge: Edge) => void
undefined
onEdgeMouseEnter
onEdgeMouseMove
onEdgeMouseLeave
onEdgeContextMenu
(event: React.MouseEvent, edge: Edge) => void
undefined
onEdgeUpdate
(oldEdge: Edge, newConnection: Connection) => void
undefined
onEdgeUpdateStart
(event: React.MouseEvent, edge: Edge, handleType: HandleType) => void
undefined
onEdgeUpdateEnd
(event: React.MouseEvent, edge: Edge, handleType: HandleType) => void
undefined
onEdgesDelete
onEdgesChange
(edgeChanges: EdgeChange[]) => void
undefined
Connections
onConnect
(connection: Connection) => void
undefined
onConnectStart
(event: React.MouseEvent, params: OnConnectStartParams) => void
undefined
onConnectEnd
(event: React.MouseEvent) => void
undefined
onClickConnectStart
(event: React.MouseEvent, params: OnConnectStartParams) => void
undefined
onClickConnectEnd
(event: React.MouseEvent) => void
undefined
Pane
onMove
(event: MouseEvent, viewport: Viewport) => void
undefined
onMoveStart
(event: MouseEvent, viewport: Viewport) => void
undefined
onMoveEnd
(event: MouseEvent, viewport: Viewport) => void
undefined
onPaneClick
(event: React.MouseEvent) => void
undefined
onPaneMouseEnter
(event: React.MouseEvent) => void
undefined
onPaneMouseMove
(event: React.MouseEvent) => void
undefined
onPaneMouseLeave
(event: React.MouseEvent) => void
undefined
onPaneContextMenu
(event: React.MouseEvent) => void
undefined
onPaneScroll
(event: React.MouseEvent) => void
undefined
Selection
onSelectionChange({ nodes, edges }: OnSelectionChangeParams)
(params: OnSelectionChangeParams) => void
undefined
onSelectionDragStart
(event: React.MouseEvent, nodes: Node[]) => void
undefined
onSelectionDrag
(event: React.MouseEvent, nodes: Node[]) => void
undefined
onSelectionDragStop
(event: React.MouseEvent, nodes: Node[]) => void
undefined
onSelectionContextMenu
(event: React.MouseEvent, nodes: Node[]) => void
undefined
onSelectionStart
() => void
undefined
onSelectionEnd
() => void
undefined
Interaction
nodesDraggable
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.boolean
true
nodesConnectable
connectable
node option.boolean
true
nodesFocusable
focusable
node option.boolean
true
edgesFocusable
focusable
edge option.boolean
true
elementsSelectable
selectable
node option.boolean
true
autoPanOnConnect
boolean
true
autoPanOnNodeDrag
boolean
true
panOnDrag
boolean | number[]
true
selectionOnDrag
boolean
false
selectionMode
SelectionMode.Full
panOnScroll
zoomOnScroll
option.boolean
false
panOnScrollSpeed
panOnScroll
is enablednumber
undefined
panOnScrollMode
PanOnScrollMode ('free', 'vertical' or 'horizontal')
'free'
zoomOnScroll
boolean
true
zoomOnPinch
boolean
true
zoomOnDoubleClick
boolean
true
selectNodesOnDrag
boolean
true
elevateNodesOnSelect
boolean
true
connectOnClick
boolean
true
connectionMode
'strict'
(only source to target connections are possible) or 'loose'
(source to source and target to target connections are allowed)ConnectionMode ('strict' or 'loose')
'strict'
disableKeyboardA11y
boolean
false
Connection Line
connectionRadius
number
20
connectionLineType
"default"
connectionLineStyle
CSSProperties
undefined
connectionLineComponent
connectionLineWrapperStyles
CSSProperties
undefined
Keys
deleteKeyCode
null
to disable functionality.string or string[] or null
'Backspace'
selectionKeyCode
null
to disable functionalitystring or string[] or null
'Shift'
multiSelectionKeyCode
null
to disable functionalitystring or string[] or null
'Meta'
zoomActivationKeyCode
panOnScroll=true
orzoomOnScroll=false
. You can set it to null
to disable functionalitystring or string[] or null
'Meta'
panActivationKeyCode
panOnScroll=false
. You can set it to null
to disable functionalitystring or string[] or null
'Space'
Pro Options
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
object
undefined
proOptions.hideAttribution
boolean
false