Panning and Zooming
The default pan and zoom behavior of React Flow is inspired by slippy maps . You pan by dragging your pointer and zoom by scrolling. You can customize this behavior easily with the interaction and keyboard props on the <ReactFlow /> component.
Viewport configurations
Here we will list and explain some configurations that other tools use.
Default viewport controls
As mentioned above, the ReactFlow default controls are as follows:
pan:pointer dragzoom:pinch or scrollselect:shift + pointer drag
Design tool viewport controls
If you prefer figma/sketch/design tool controls you can set panOnScroll and selectionOnDrag to true and panOnDrag to false:
pan:scroll, middle / right mouse drag, space + pointer dragzoom:pinch or cmd + scrollselect:pointer drag
In this example we also set selectionMode="partial" to be able to add nodes to a selection that are only partially selected.
Last updated on