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

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

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

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

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