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