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
onEdgesChange?
(edgeChanges: EdgeChange[]) => void
onConnect?
(connection: Connection) => void
nodeTypes?
{ [key: string]: React.ComponentType<NodeProps> }
{ input: InputNode, default: DefaultNode, output: OutputNode, group: GroupNode }
edgeTypes?
{ [key: string]: React.ComponentType<EdgeProps> }
{ default: BezierEdge, straight: StraightEdge, step: StepEdge, smoothstep: SmoothStepEdge }
nodeOrigin?
[0.5, 0.5]
, bottom-right = [1, 1]
. Values should be between 0
and 1
.[number, number]
[0,0]
style?
CSSProperties
className?
string
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?
nodeExtent?
[[-∞, -∞], [+∞, +∞]]
preventScrolling?
boolean
true
attributionPosition?
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
onError?
(code: string, message: string) => void
Nodes
onNodeClick?
(event: React.MouseEvent, node: Node) => void
onNodeDragStart?
onNodeDrag?
onNodeDragStop?
onNodeMouseEnter?
(event: React.MouseEvent, node: Node) => void
onNodeMouseMove?
(event: React.MouseEvent, node: Node) => void
onNodeMouseLeave?
(event: React.MouseEvent, node: Node) => void
onNodeContextMenu?
(event: React.MouseEvent, node: Node) => void
onNodeDoubleClick?
(event: React.MouseEvent, node: Node) => void
onNodesDelete?
(nodes: Node[]) => void
onNodesChange?
(nodeChanges: NodeChange[]) => void
Edges
onEdgeClick?
(event: React.MouseEvent, edge: Edge) => void
onEdgeDoubleClick?
(event: React.MouseEvent, edge: Edge) => void
onEdgeMouseEnter?
(event: React.MouseEvent, edge: Edge) => void
onEdgeMouseMove?
(event: React.MouseEvent, edge: Edge) => void
onEdgeMouseLeave?
(event: React.MouseEvent, edge: Edge) => void
onEdgeContextMenu?
(event: React.MouseEvent, edge: Edge) => void
onEdgeUpdate?
(oldEdge: Edge, newConnection: Connection) => void
onEdgeUpdateStart?
(event: React.MouseEvent, edge: Edge, handleType: HandleType) => void
onEdgeUpdateEnd?
(event: React.MouseEvent, edge: Edge, handleType: HandleType) => void
onEdgesDelete?
(edges: Edge[]) => void
onEdgesChange?
(edgeChanges: EdgeChange[]) => void
Connections
onConnect?
(connection: Connection) => void
onConnectStart?
(event: React.MouseEvent, params: OnConnectStartParams) => void
onConnectEnd?
(event: React.MouseEvent) => void
onClickConnectStart?
(event: React.MouseEvent, params: OnConnectStartParams) => void
onClickConnectEnd?
(event: React.MouseEvent) => void
isValidConnection
(edge: Edge) => boolean
undefined
Pane
onMove?
(event: MouseEvent, viewport: Viewport) => void
onMoveStart?
(event: MouseEvent, viewport: Viewport) => void
onMoveEnd?
(event: MouseEvent, viewport: Viewport) => void
onPaneClick?
(event: React.MouseEvent) => void
onPaneMouseEnter?
(event: React.MouseEvent) => void
onPaneMouseMove?
(event: React.MouseEvent) => void
onPaneMouseLeave?
(event: React.MouseEvent) => void
onPaneContextMenu?
(event: React.MouseEvent) => void
onPaneScroll?
(event: React.MouseEvent) => void
Selection
onSelectionChange?
(params: OnSelectionChangeParams) => void
onSelectionDragStart?
(event: React.MouseEvent, nodes: Node[]) => void
onSelectionDrag?
(event: React.MouseEvent, nodes: Node[]) => void
onSelectionDragStop?
(event: React.MouseEvent, nodes: Node[]) => void
onSelectionContextMenu?
(event: React.MouseEvent, nodes: Node[]) => void
onSelectionStart?
() => void
onSelectionEnd?
() => void
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
panOnScrollMode?
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)'strict'
disableKeyboardA11y?
boolean
false
Connection Line
connectionRadius?
number
20
connectionLineType?
'default'
connectionLineStyle?
CSSProperties
connectionLineComponent?
React.Component
connectionLineWrapperStyles?
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?
null
to disable functionality.string | string[] | null
'Backspace'
selectionKeyCode?
null
to disable functionalitystring | string[] | null
'Shift'
multiSelectionKeyCode?
null
to disable functionalitystring | string[] | null
'Meta'
zoomActivationKeyCode?
panOnScroll=true
orzoomOnScroll=false
. You can set it to null
to disable functionalitystring | string[] | null
'Meta'
panActivationKeyCode?
panOnScroll=false
. You can set it to null
to disable functionalitystring | string[] | 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 (see below)
proOptions.hideAttribution?
boolean
false