The Viewport

Panning and Zooming

The default pan and zoom behaviour of React Flow is inspired by slippy maps (opens in a new tab). You pan by dragging and zoom by scrolling. You can customize this behaviour easily with the provided props:

  • panOnDrag: default: true
  • selectionOnDrag: default: false (available since 11.4.0)
  • panOnScroll: default: false (Overwrites zoomOnScroll)
  • panOnScrollSpeed: default: 0.5
  • panOnScrollMode: default: 'free'. 'free' (all directions), 'vertical' (only vertical) or 'horizontal' (only horizontal)
  • zoomOnScroll: default: true
  • zoomOnPinch: default: true
  • zoomOnDoubleClick: default: true
  • preventScrolling: default: true (browser scroll behaviour is prevented)
  • zoomActivationKeyCode: default 'Meta'
  • panActivationKeyCode: default 'Space' (available since 11.4.0)

Default Viewport Controls

As mentioned above, the default controls are:

  • pan: drag mouse
  • zoom: scroll
  • create selection: Shift + drag

Figma-like Viewport Controls

If you prefer figma/sketch/design tool controls you can set panOnScroll={true} and selectionOnDrag={true}:

  • pan: Space + drag mouse, scroll, middle or right mouse
  • zoom: pitch or cmd + scroll
  • create selection: drag mouse

In this example we also set selectionMode={SelectionMode.Partial} to be able to add nodes to a selection that are only partially selected.