Home > @jsplumbtoolkit/browser-ui-react
browser-ui-react package
Provides integration with React (17+). This package has a dependency on @jsplumbtoolkit/browser-ui.
For a detailed discussion of this package, see https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/react-integration.
Classes
| Class | Description |
|---|---|
| BaseGroupComponent | Base component that your group components can extend, to get access to a few helper methods. It is not imperative that you extend this component. |
| BaseNodeComponent | Base component that your node components can extend, to get access to a few helper methods. It is not imperative that you extend this component. |
| BasePortComponent | Base class for components that render Ports. Your port components can extend this to get access to a few helper methods. You are expected to supply a parent |
| BrowserUIReact | Extension of the Toolkit suitable for use with the React integration. |
| ControlsComponent | |
| EdgeTypePickerComponent | A helper component to support the selection of an edge type from a set of edge property mappings. |
| JsPlumbToolkitDragDropComponent | Provides a React component wrapper around the Toolkit's DropManager. |
| JsPlumbToolkitMiniviewComponent | jsPlumb Toolkit Miniview Component |
| JsPlumbToolkitSurfaceComponent | Provides a React component that fronts a surface widget. |
| ShapeComponent | A component that renders an SVG shape. |
| ShapeLibraryPaletteComponent | |
| SurfaceDropComponent | Surface Drop Component - draggable nodes. This is an abstract component. You are expected to provide the render method. |
Functions
| Function | Description |
|---|---|
| newInstance(options) | Creates a new instance of the Toolkit for use with the React integration. |
Interfaces
| Interface | Description |
|---|---|
| BasePortProps | |
| ControlsComponentProps | Props for the controls component. |
| ControlsComponentState | |
| DragDropProps | Props for the JsPlumbToolkitDragDropComponent. Most users will probably want to use the SurfaceDropComponent instead. |
| DragDropState | State object for drag/drop component. |
| EdgeTypePickerComponentProps | Props for the EdgeTypePickerComponent |
| EdgeTypePickerComponentState | |
| MiniviewProps | Props for the miniview component. |
| MiniviewState | |
| PropsWithContext | |
| ShapeComponentProps | Props for the ShapeComponent. |
| ShapeComponentState | |
| ShapeLibraryPaletteProps | |
| ShapeLibraryPaletteState | |
| SurfaceDropProps | Props for SurfaceDropComponent |
| SurfaceDropState | |
| SurfaceProps | Props for the Surface component. You are expected to provide, at a minimum, an instance of Asynchronous rendering ---------------------- From version 5.8.0 onwards this component will, by default, render vertices "asynchronously", which is to say that it will hold off informing the Toolkit that the rendering of some vertex has been completed until an internal ResizeObserver detects that the initial hydration of the element is complete. This mechanism is of particular use when you're bulk loading data and you're using React 18, as React 18's rendering pipeline does not always hydrate a component immediately, and the Toolkit cannot therefore effectively run a layout or compute the positions of connectors. ResizeObserver is supported on all recent versions of modern browsers, but not on IE11. In the absence of ResizeObserver, the component will fall back to the "synchronous" rendering mechanism. It is extremely unlikely you will want to switch off asynchronous rendering, but you can do so by setting the prop |
Type Aliases
| Type Alias | Description |
|---|---|
| BasePortState | |
| BaseVertexState |