React API
React SnapLine components, props, callbacks, contexts, and refs.
Engine creates or accepts a core engine and provides it through context.
| Component | Important props |
|---|---|
Node | id, nodeObject, geometry, resize configuration, callbacks, onGeometryChanged, lineComponent, elementProps |
Connector | id, name (required), connectorObject, rules, virtual, surfaceStrategies, metadata, callbacks |
Line | line, SVG presentation |
Select | callbacks and presentation |
Group | node geometry, header content, membership policy and callbacks |
Placement | controller, cancellation behavior, render function |
ControlledGraph | lines (your LineRecords), onLineChangeRequest, onDiagnosticsChanged |
Node and Group forward refs to their core objects. Connector exposes a ConnectorRef, and useNodeHandle() returns a callback ref for a dedicated
drag surface.
Set virtual when a connector should use the parent node’s custom shape
surfaces without rendering a port element. Opaque connection payloads remain on LineMirror, so a custom lineComponent can resolve presentation from
application-owned edge state. Custom renderers mount static structure and call line.bindGeometryWriter(...) from a layout effect to update retained SVG,
Canvas, or graphics refs without rendering React on pointer movement.
Connector callbacks, metadata, policy, surface strategies, collider radius,
and edge-pan behavior update across renders. virtual can also be
toggled without replacing the logical connector or its lines. name and connectorObject are construction-time identities.
Changed geometry props resynchronize the core object. Consumer callback objects and convenience callback props are composed, deduplicating the same function reference rather than overwriting one another.