<Controls />

Source on GitHub

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 '@xyflow/react'
 
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.

#showZoom?
boolean
Whether or not to show the zoom in and zoom out buttons. These buttons will adjust the viewport zoom by a fixed amount each press.
true
#showFitView?
boolean
Whether or not to show the fit view button. By default this button will adjust the viewport so that all nodes are visible at once.
true
#showInteractive?
boolean
true
#fitViewOptions?
FitViewOptions
Customise the options for the fit view button. These are the same options you would pass to the fitView function.
#onZoomIn?
() => void
Called in addition the default zoom behaviour when the zoom in button is clicked.
#onZoomOut?
() => void
Called in addition the default zoom behaviour when the zoom out button is clicked.
#onFitView?
() => void
Called when the fit view button is clicked. When this is not provided, the viewport will be adjusted so that all nodes are visible.
#onInteractiveChange?
(interactiveStatus: boolean) => void
Called when the interactive (lock) button is clicked.
#position?
PanelPosition
"bottom-left"
#ariaLabel?
string
"React Flow controls"
#orientation?
"horizontal" | "vertical"
"vertical"

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

Notes