93___controls___

<Controls />

Source on GitHub

The <Controls /> component renders a small panel that contains 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 ControlProps.

• 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.
• 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.
• showInteractive?: boolean Show button for toggling interactivity
• fitViewOptions?: FitViewOptionsBase<NodeType> 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 behavior when the zoom in button is clicked.
• onZoomOut?: () => void Called in addition the default zoom behavior 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 Position of the controls on the pane
• children?: ReactNode
• style?: CSSProperties Style applied to container
• className?: string Class name applied to container
• aria-label?: string
• orientation?: "horizontal" | "vertical"

Notes

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