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