Skip to main content

<MiniMap />

The Minimap component adds an interactive Minimap to React Flow that shows the whole graph. You can use the MiniMap plugin by passing it as a children to the ReactFlow component.

Interactive Minimap

The minimap is not interactive by default. If you want to control the viewport with the mini map, you need to pass zoomable and pannable.

Usage Example​

Prop Types​

pannable?​

Description:
If set to true you can control the React Flow viewport position by dragging the minimap.
Type:
boolean
Default:
false

zoomable?​

Description:
If set to true you can control the React Flow viewport scale by zooming (scroll or pinch) the minimap.
Type:
boolean
Default:
false

nodeColor?​

Description:
If you pass a color string, all nodes get that color. If you pass a function you can return a color depending on the passed node
Type:
string | (node: Node) => string
Default:
#fff

nodeStrokeColor?​

Description:
If you pass a color string, all nodes get that strokecolor. If you pass a function you can return a color depending on the passed node
Type:
string | (node: Node) => string
Default:
#555

nodeBorderRadius?​

Description:
Node border radius
Type:
number
Default:
5

nodeStrokeWidth?​

Description:
Node stroke width
Type:
number
Default:
2

nodeClassName?​

Description:
Node class name. If you pass a function you can return a class name depending on the passed node
Type:
string | (node: Node) => string

nodeComponent?​

Description:
Custom component for a node.
Type:
React.ComponentType(MiniMapNodeProps)

maskColor?​

Description:
Mask color
Type:
string
Default:
"rgb(240, 242, 243, 0.7)"

maskStrokeColor?​

Description:
Inner mask stroke color
Type:
string
Default:
"none"

maskStrokeWidth?​

Description:
Inner mask stroke width
Type:
number
Default:
1

inversePan?​

Description:
Determines if map should pan in the opposite direction
Type:
boolean
Default:
false

zoomStep?​

Description:
Zoom step for zoomable minimap
Type:
number
Default:
10

onClick?​

Description:
Get's called when the minimap is clicked.
Type:
(event: React.MouseEvent, position: XYPosition) => void

onNodeClick?​

Description:
Get's called when a minimap node is clicked.
Type:
(event: React.MouseEvent, node: Node) => void

ariaLabel?​

Description:
ariaLabel for the minimap. You can set it to `null` to hide it.
Type:
string | null
Default:
"React Flow mini map"

style?​

Description:
Mini map style attributes
Type:
CSSProperties

className?​

Description:
Additional class name
Type:
string

position?​

Description:
Position of the minimap panel in the viewport
Type:
PanelPosition
Default:
'bottom-right'

Custom MiniMap Nodes​

You can swap out the default component used for nodes in the minimap with whatever you want by setting the nodeComponent prop on the <MiniMap /> component. Below is the same example as before, but now we're rendering a circle instead of a rectangle!

You must use SVG

For performance reasons, the minimap is rendered as an SVG. This means that you must use SVG elements for your custom node component if you want it to work properly.

Custom Node Prop Types​

id​

Description:
The id of the React Flow node.
Type:
string

x​

Description:
The x position of the React Flow node.
Type:
number

y​

Description:
The y position of the React Flow node.
Type:
number

width​

Description:
The width of the React Flow node.
Type:
number

height​

Description:
The height of the React Flow node.
Type:
number

borderRadius​

Description:
The border radius passed into the nodeBorderRadius prop of the MiniMap component.
Type:
number

className​

Description:
The class name passed into the nodeClassName prop of the MiniMap component.
Type:
string

color​

Description:
The color passed into the nodeColor prop of the <MiniMap />component, or the color computed by the function passed in instead.
Type:
string

shapeRendering​

Description:
This is computed based on your browser and some other factors and can be used to hint at the SVG renderer on how to optimize the rendering of paths.
Type:
"crispEdges" | "geometricPrecision"

strokeColor​

Description:
The stroke color passed into the nodeStrokeColor prop of the MiniMap component.
Type:
string

strokeWidth​

Description:
The stroke width passed into the nodeStrokeWidth prop of the MiniMapcomponent.',
Type:
number

style​

Description:
Any styles set on the React Flow node.
Type:
CSSProperties

onClick​

Description:
An optional click handler for the minimap node.
Type:
(event: React.MouseEvent, id: string) => void

Typescript​

The interface of both the <MiniMap /> and custom node props are exported as MiniMapProps and MiniMapNodeProps respectively.

Npm Package​

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