@joint/react
    Preparing search index...

    Interface GraphProviderProps<Element, Link>

    Props for GraphProvider — pick the graph source (existing instance, initial cells, or a controlled cells array) and subscribe to changes.

    interface GraphProviderProps<
        Element extends ElementJSONInit = ElementJSONInit,
        Link extends LinkJSONInit = LinkJSONInit,
    > {
        autoSizeOrigin?: AutoSizeOrigin;
        cellModel?: typeof Cell;
        cellNamespace?: unknown;
        cells?: ProviderCells<Element, Link>;
        children?: ReactNode;
        graph?: Graph<Attributes, ModelSetOptions>;
        initialCells?: readonly CellInput<Element, Link>[];
        onCellsChange?: (newCells: ProviderCells<Element, Link>) => void;
        onIncrementalCellsChange?: OnIncrementalCellsChange<Element, Link>;
    }

    Type Parameters

    • Element extends ElementJSONInit = ElementJSONInit

      Shape of the element cells stored in the graph.

    • Link extends LinkJSONInit = LinkJSONInit

      Shape of the link cells stored in the graph.

    Index

    Properties

    autoSizeOrigin? cellModel? cellNamespace? cells? children? graph? initialCells? onCellsChange? onIncrementalCellsChange?

    Properties

    autoSizeOrigin?: AutoSizeOrigin

    Reference point that stays fixed when an auto-sized element's measured size changes (via useMeasureElement). Mirrors CSS transform-origin semantics.

    • 'top-left' (default): element grows right/down.
    • 'center': element grows symmetrically, its geometric center stays put.

    Only affects measurement-driven writes. Manual cell.resize(), interactive resize tools, and direct cell.set('size', ...) calls are unaffected.

    'top-left'
    cellModel?: typeof Cell

    Base model class used for every cell the graph constructs from JSON. Maps to the (deprecated) cellModel option of dia.Graph; prefer cellNamespace, which registers shapes by type and supports per-type model classes.

    https://docs.jointjs.com/api/dia/Graph

    cellNamespace?: unknown

    Cell namespace passed to new dia.Graph. Your entries are merged on top of the built-ins, so JointJS shapes and the @joint/react ElementModel / LinkModel stay available even when you register custom shapes.

    JointJS shapes plus the @joint/react cell models

    cells?: ProviderCells<Element, Link>

    Controlled cells array. Whenever this array changes, the graph is re-synced to match it (and initialCells is ignored); passing the same reference on a re-render does not re-sync. Pair it with onCellsChange to mirror user edits back into your own state.

    children?: ReactNode

    React children rendered inside the provider, typically a <Paper />.

    graph?: Graph<Attributes, ModelSetOptions>

    Pre-existing JointJS graph instance to use. If omitted, GraphProvider creates a fresh new dia.Graph(...).

    https://docs.jointjs.com/api/dia/Graph

    initialCells?: readonly CellInput<Element, Link>[]

    Cells used to seed the graph once, at mount, for uncontrolled mode. Later changes to this array are not applied. Ignored when cells is provided.

    CellInput

    onCellsChange?: (newCells: ProviderCells<Element, Link>) => void

    Fires after each graph change with the full, updated cells array. Use it to keep external React state in sync with the graph; it is notification only and does not itself write anything back into the graph.

    onIncrementalCellsChange?: OnIncrementalCellsChange<Element, Link>

    Fires after each commit with the granular added / changed / removed delta, so you can apply just the change to an external store (Redux, Zustand, etc.). Works in both controlled and uncontrolled mode.

    IncrementalCellsChange

    Settings

    Member Visibility

    On This Page

    Properties