Controls

The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button. You can use it by passing it as a children to the ReactFlow component:

Usage

import ReactFlow, { Controls } from 'react-flow-renderer';
const FlowWithControls = () => (
  <ReactFlow elements={elements}>
    <Controls />
  </ReactFlow>
);

Prop Types

showZoom: boolean - default: true
showFitView: boolean - default: true
showInteractive: boolean - default: true
style: css properties
className: additional class name
onZoomIn: callback function that gets triggered when the zoom in button is pressed
onZoomOut: callback function that gets triggered when the zoom out button is pressed
onFitView: callback function that gets triggered when the fit-to-view button is pressed
onInteractiveChange: callback function that gets triggered when the lock button is pressed - passes the new value

Typescript: The interface of the Controls Prop Types are exported as ControlProps.

Edit this page

current version: 8.8.0