Skip to main content

<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';

function FlowWithControls() {
return (
<ReactFlow nodes={[]} edges={[]}>
<Controls />
</ReactFlow>
);
}

Prop Types

NameTypeDefaultDescription
showZoombooleantrueDisplay zoom button
showFitViewbooleantrueDisplay fit view button
showInteractivebooleantrueDisplay interactive button
onZoomInfunctionundefinedcallback when the zoom-in button gets pressed
onZoomOutfunctionundefinedcallback when the zoom-out button gets pressed
onFitViewfunctionundefinedcallback when the fit-view button gets pressed
onInteractiveChange(isInteractive)functionundefinedcallback when the lock button is pressed
styleCSSPropertiesundefinedControls style attributes
classNamestringundefinedAdditional class name
  • Typescript: The interface of the Controls Prop Types are exported asControlProps.

Extended Controls

You can add buttons to the control panel by using the ControlButton component and pass it as a children to the Controls component:

import { Controls, ControlButton } from 'react-flow-renderer';

function CustomControls() {
return (
<Controls>
<ControlButton onClick={() => console.log('action')}>
<FancyIcon />
</ControlButton>
<ControlButton onClick={() => console.log('another action')}>
<AnotherFancyIcon />
</ControlButton>
</Controls>
);
}

ControlButton Prop Types

All props get forwarded to the ControlButton component.