JointJS interop

@joint/react is a layer over the native JointJS core, and the core stays within reach. The cell records you pass to GraphProvider become real JointJS models in a real dia.Graph, so anything the core can do (custom cell types, native shapes, graph traversal, tools, highlighters) you can do from React.

If you already know JointJS, this chapter is the fastest way to map that knowledge onto the React API. And when a page here still does not cover your case, Escape hatches shows how to reach the underlying views directly.

Working with Models

Records vs models in @joint/react. When models surface in callbacks, model.get on data, and how to extend them with ES6 subclasses.

Using Built-in Shapes

Learn how to use native JointJS shape and link types from @joint/react by setting the type field on a cell record.

React inside shapes

Learn how to route @joint/react's renderElement into a different SVG selector with portalSelector, so React content can mount inside native JointJS shapes.

Querying the Graph

Read graph structure and traverse it from @joint/react using the native dia.Graph instance behind useGraph().

Adding Built-in Tools

Learn how to attach native JointJS element tools and link tools from @joint/react with dia.ToolsView and the Paper hover-event props.

Outlining Elements

Learn how to outline SVG element parts in @joint/react with highlighters.mask, useMarkup, and the Paper hover-event props.