Panning and Zooming

The default pan and zoom behaviour of React Flow is inspired by slippy maps. 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.