<Controls />

Source on GitHub (opens in a new tab)

The <Controls /> component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

import ReactFlow, { Controls } from 'reactflow'
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} edges={[...]}>
      <Controls />
    </ReactFlow>
  )
}

Props

For TypeScript users, the props type for the <Controls /> component is exported as ControlsProps.

Name	Type	Default
#`showZoom?`	`boolean`	`true`
#`showFitView?`	`boolean`	`true`
#`showInteractive?`	`boolean`	`true`
#`fitViewOptions?`	`FitViewOptions`
#`onZoomIn?`	`() => void`
#`onZoomOut?`	`() => void`
#`onFitView?`	`() => void`
#`onInteractiveChange?`	`(interactiveStatus: boolean) => void` Called when the interactive (lock) button is clicked.
#`position?`	`PanelPosition`	`"bottom-left"`

Additionally, the <Controls /> component accepts any prop valid on a <div /> element.

Notes

To extend or customise the controls, you can use the <ControlButton /> component