Skip to main content

ReactFlow Props

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

import ReactFlow from 'react-flow-renderer';

Typescript

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

import { ReactFlowProps } from 'react-flow-renderer';
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

NameTypeDefaultDescription
defaultNodesNode[][] array of nodes (for an uncontrolled flow)
defaultEdgesEdge[][] array of edges (for an uncontrolled flow)
nodesNode[][] array of nodes (for an controlled flow)
edgesEdge[][] array of edges (for an controlled flow)
onNodesChange(nodeChanges)functionundefined handler for adding interactivity for a controlled flow
onEdgesChange(edgeChanges)functionundefined handler for adding interactivity for a controlled flow
nodeTypesobject{input: InputNode, default: DefaultNode, output: OutputNode, group: GroupNode} object with node types
edgeTypesobject{ default: BezierEdge, straight: StraightEdge, step: StepEdge, smoothstep: SmoothStepEdge } object with edge types
defaultMarkerColorstring#b1b1b7 default marker color
styleCSSPropertiesundefined css properties
classNamestringundefined additional class name

Flow View

NameTypeDefaultDescription
fitViewbooleanfalsefits the view once to make all nodes visible
fitViewOptionsFitViewOptionsundefinedoptions that are passed to the initial fitView
minZoomnumber0.5min zoom level
maxZoomnumber2max zoom level
defaultZoomnumber1default zoom level
defaultPositionnumber[][0, 0]default viewport position
snapGridnumber[][15, 15]snap grid gap
snapToGridbooleanfalsesnap grid enabled
onlyRenderVisibleElementsbooleanfalseif true only nodes and edges inside the viewport get rendered
translateExtentnumber[number[], number[]][[-∞, -∞], [+∞, +∞]]passed to the d3-zoom translateExtent option
nodeExtentnumber[number[], number[]][[-∞, -∞], [+∞, +∞]]defines the extent for the node positions
preventScrollingbooleantrueif true default browser scroll behaviour is prevented
attributionPosition'top-left', 'top-center', 'top-right' or 'bottom-right''bottom-right'position of the "React Flow" attribution

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

NameTypeDefaultDescription
onInit(reactFlowInstance: ReactFlowInstance)functionundefinedcalled as soon as React Flow is initialized

Nodes

NameTypeDefaultDescription
onNodeClick(event: React.MouseEvent, node: Node)functionundefinedcalled when user clicks a node
onNodeDragStart(event: React.MouseEvent, node: Node, nodes: Node[])functionundefinednode drag start
onNodeDrag(event: React.MouseEvent, node: Node, nodes: Node[])functionundefinednode drag
onNodeDragStop(event: React.MouseEvent, node: Node, nodes: Node[])functionundefinednode drag stop
onNodeMouseEnter(event: React.MouseEvent, node: Node)functionundefinednode mouse enter
onNodeMouseMove(event: React.MouseEvent, node: Node)functionundefinednode mouse move
onNodeMouseLeave(event: React.MouseEvent, node: Node)functionundefinednode mouse leave
onNodeContextMenu(event: React.MouseEvent, node: Node)functionundefinednode context menu
onNodeDoubleClick(event: React.MouseEvent, node: Node)functionundefinednode double click
onNodesDelete(nodes)functionundefinedcalled when nodes get deleted

Edges

NameTypeDefaultDescription
onEdgeClick(event: React.MouseEvent, edge: Edge)functionundefinedcalled when user clicks an edge
onEdgeMouseEnter(event: React.MouseEvent, edge: Edge)functionundefinededge mouse enter
onEdgeMouseMove(event: React.MouseEvent, edge: Edge)functionundefinededge mouse move
onEdgeMouseLeave(event: React.MouseEvent, edge: Edge)functionundefinededge mouse leave
onEdgeContextMenu(event: React.MouseEvent, edge: Edge)functionundefinedcalled when user does a right-click on an edge
onEdgeUpdate(oldEdge, newConnection)functionundefinedcalled when the end of an edge gets dragged to another source or target
onEdgeUpdateStart(event: React.MouseEvent, edge: Edge, handleType: HandleType)functionundefinedcalled when user starts to update an edge
onEdgeUpdateEnd(event: MouseEvent, edge: Edge, handleType: HandleType)functionundefinedcalled when user ends an edge update (for TS users: this is a normal MouseEvent and not a React.MouseEvent like the other ones).
onEdgesDelete(edges: Edge[])functionundefinedcalled when edges get deleted
elevateEdgesOnSelectbooleanfalseEdges get a higher zIndex if this is true and a connected node is selected

Connections

NameTypeDefaultDescription
onConnect({ source, target }: Connection)functionundefinedcalled when user connects two nodes
onConnectStart(event: React.MouseEvent, { nodeId, handleType }: OnConnectStartParams)functionundefinedcalled when user starts to drag connection line
onConnectStop(event: React.MouseEvent)functionundefinedcalled when user stops to drag connection line (called before onConnect)
onConnectEnd(event: React.MouseEvent)functionundefinedcalled after user stops or connects nodes (called after onConnect)
onClickConnectStart(event: React.MouseEvent, { nodeId, handleType }: OnConnectStartParams)functionundefinedcalled when user starts to do a connection by click
onClickConnectStop(event: React.MouseEvent)functionundefinedcalled when user stops a connection by click (called before onConnect)
onClickConnectEnd(event: React.MouseEvent)functionundefinedcalled after user stops a connection by click (called after onConnect)

Pane

NameTypeDefaultDescription
onMove(event: MouseEvent, viewport: Viewport)functionundefinedcalled when user is panning or zooming
onMoveStart(event: MouseEvent, viewport: Viewport)functionundefinedcalled when user starts panning or zooming
onMoveEnd(event: MouseEvent, viewport: Viewport)functionundefinedcalled when user ends panning or zooming
onSelectionChange({ nodes, edges }: OnSelectionChangeParams)functionundefinedcalled when user selects one or multiple elements
onSelectionDragStart(event: React.MouseEvent, nodes: Node[])functionundefinedcalled when user starts to drag a selection
onSelectionDrag(event: React.MouseEvent, nodes: Node[])functionundefinedcalled when user drags a selection
onSelectionDragStop(event: React.MouseEvent, nodes: Node[])functionundefinedcalled when user stops to drag a selection
onSelectionContextMenu(event: React.MouseEvent, nodes: Node[])functionundefinedcalled when user does a right-click on a selection
onPaneClick(event: React.MouseEvent)functionundefinedcalled when user clicks directly on the canvas
onPaneContextMenu(event: React.MouseEvent)functionundefinedcalled when user does a right-click on the canvas
onPaneScroll(event: React.MouseEvent)functionundefinedcalled when user scrolls pane (only works when zoomOnScroll is set to `false)

Interaction

NameTypeDefaultDescription
nodesDraggablebooleantrueThis applies to all nodes. You can also change the behavior of a specific node with the draggable node option
nodesConnectablebooleantrueThis applies to all nodes. You can also change the behavior of a specific node with the connectable node optionstart
elementsSelectablebooleantrueThis applies to all nodes and edges. You can also change the behavior of a specific node with the selectable node option. drag
panOnDragbooleantrueenables pan on drag
panOnScrollbooleanfalseMove the graph while keeping the zoomlevel using mousewheel or trackpad. Overwrites zoomOnScroll enter
panOnScrollSpeednumberundefinedControls how fast the canvas is moved while using the mousewheel. Only has an effect if panOnScroll is enabled
panOnScrollMode'free', 'vertical' or 'horizontal''free'Enables certain scroll directions
zoomOnScrollbooleantrueZoom the graph in and out using the mousewheel or trackpad
zoomOnPinchbooleantrueZoom the graph in and out using pinch
zoomOnDoubleClickbooleantrueEnables zoom on double click
selectNodesOnDragbooleantrue'Enables to select nodes on drag
connectOnClickbooleantrueEnables to create connections on touch devices and via mouse click
connectionMode'strict' or 'loose''strict''strict' (only source to target connections are possible) or 'loose' (source to source and target to target connections are allowed)

Connection Line Options

NameTypeDefaultDescription
connectionLineTypestringundefinedcalled when user clicks a node
connectionLineStyleCSSPropertiesundefinedconnection style as SVG attributes
connectionLineComponentfunctionundefinedcustom connection line component
connectionLineWrapperStylesCSSPropertiesundefinedstyles for the connection line SVG wrapper

Keys

NameTypeDefaultDescription
deleteKeyCodestring or string[] or null'Backspace'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.
selectionKeyCodestring or string[] or null'Shift'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.
multiSelectionKeyCodestring or string[] or null'Meta'While pressing the multiSelectionKeyCode you can select multiple nodes and edges with a click. You can set it to null to disable functionality.
zoomActivationKeyCodestring or string[] or null'Meta'While pressing the zoomActivationKeyCode you can zoom even if panOnScroll=true or zoomOnScroll=false. You can set it to null to disable functionality.

Pro

NameTypeDefaultDescription
proOptionsobjectundefinedoptions to specify license and hide attribution (you can find more information on the pro page)