Components
Last updated on
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 moreThe 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 moreYou can add buttons to the control panel by using the ControlButton component and pass it as a child to the Controls component.
Read moreThe Controls component renders a small panel that contains convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.
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. You can see an example usage of the component in the edge label renderer example.
Read moreYou can use the EdgeText component as a helper component to display text within your custom edges.
Read moreThe EdgeToolbar component can render a toolbar or tooltip to one side of a custom edge. This toolbar doesn't scale with the viewport so that the content doesn't get too small when zooming out.
Read moreThe Handle component is used in your custom nodes to define connection points.
Read moreThe MiniMap component can be used to render 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 moreTo create your own resizing UI, you can use the NodeResizeControl component where you can pass children (such as icons).
Read moreThe 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 moreThe NodeToolbar component can render a toolbar or tooltip to one side of a custom node. This toolbar doesn't scale with the viewport so that the content is always visible.
Read moreThe Panel component helps you position content above the viewport. It is used internally by the MiniMap and Controls components.
Read moreThe ViewportPortal component can be used to add components to the same viewport of the flow where nodes and edges are rendered. This is useful when you want to render your own components that are adhere to the same coordinate system as the nodes & edges and are also affected by zooming and panning
Read more