Skip to main content

<Controls />

The controls component contains a panel with 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 Example​

Prop Types​

showZoom​

Description:
Display zoom button
Type:
boolean
Default:
true

showFitView​

Description:
Display fit view button
Type:
boolean
Default:
true

showInteractive​

Description:
Display interactive button
Type:
boolean
Default:
true

onZoomIn​

Description:
callback when the zoom-in button gets pressed
Type:
function
Default:
undefined

onZoomOut​

Description:
callback when the zoom-out button gets pressed
Type:
function
Default:
undefined

onFitView​

Description:
callback when the fit-view button gets pressed
Type:
function
Default:
undefined

onInteractiveChange(isInteractive)​

Description:
callback when the lock button is pressed
Type:
function
Default:
undefined

style​

Description:
Controls style attributes
Type:
CSSProperties
Default:
undefined

className​

Description:
Additional class name
Type:
string
Default:
undefined

position​

Description:
Position of the controls panel in the viewport
Type:
PanelPosition ('top-left'`, 'top-center', 'top-right', 'bottom-left', 'bottom-center' or 'bottom-right')
Default:
'bottom-left'

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:

ControlButton Prop Types​

All props get forwarded to the ControlButton component.

Npm Package​

The controls component is published under @reactflow/controls and can also be installed and used separately.