Renders a graph element as an unstyled HTML node you fully control. Reach for
this inside <Paper renderElement={...}> when you want plain DOM (a <div>,
inputs, your own components) instead of SVG shapes, with no default theme.
All props are spread onto the inner <div> (children, style,
className, event handlers, data-*, etc.), and a forwarded ref lands on
that same inner <div> — so a parent can focus or measure the host directly.
By default the host measures its content via useMeasureElement and
syncs that size back to the graph element; set useModelGeometry to skip
measurement and size the host from the element's model geometry instead.
Applies no default styling. For a ready-themed box driven by --jj-box-* CSS
variables, use HTMLBox instead.
Example
import { Paper, HTMLHost } from'@joint/react';
// Render each element as your own HTML node and style it via CSS. <PaperrenderElement={({ label }) => ( <HTMLHostclassName="my-node">{label}</HTMLHost> )}/>
Renders a graph element as an unstyled HTML node you fully control. Reach for this inside
<Paper renderElement={...}>when you want plain DOM (a<div>, inputs, your own components) instead of SVG shapes, with no default theme.All props are spread onto the inner
<div>(children,style,className, event handlers,data-*, etc.), and a forwardedreflands on that same inner<div>— so a parent can focus or measure the host directly. By default the host measures its content via useMeasureElement and syncs that size back to the graph element; setuseModelGeometryto skip measurement and size the host from the element's model geometry instead.Applies no default styling. For a ready-themed box driven by
--jj-box-*CSS variables, use HTMLBox instead.