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: trueshowFitView
: boolean - default: trueshowInteractive
: boolean - default: truestyle
: css propertiesclassName
: additional class nameonZoomIn
: callback function that gets triggered when the zoom in button is pressedonZoomOut
: callback function that gets triggered when the zoom out button is pressedonFitView
: callback function that gets triggered when the fit-to-view button is pressedonInteractiveChange
: 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
.