ReferenceComponents

Components

<Background />

The Background component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.

Read more

<BaseEdge />

The BaseEdge component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.

Read more

<Controls />

The Controls component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

Read more

<EdgeLabelRenderer />

Edges are SVG-based. If you want to render more complex labels you can use the EdgeLabelRenderer component to access a div based renderer. This component is a portal that renders the label in a div that is positioned on top of the edges.

Read more

<MiniMap />

The MiniMap component renders an overview of your flow. It renders each node as an SVG element and visualizes where the current viewport is in relation to the rest of the flow.

Read more

<NodeResizer />

The NodeResizer component can be used to add a resize functionality to your nodes. It renders draggable controls around the node to resize in all directions.

Read more

<NodeToolbar />

The NodeToolbar component can be used to display a toolbar on a side of a node or display a tooltip for example.

Read more

<Panel />

The Panel component helps you position content above the viewport. It is used internally by the MiniMap and Controls components.

Read more