Skip to main content

useDiagram()

If you decide to write your own component that needs to access the underlying Diagram, this hook will be of use.

Usage​

import { useDiagram } from "@visuallyjs/browser-ui-react"

export default function MyComponent() {
    
    const diagram = useDiagram()
    
    return <div>
        {diagram && <>The diagram currently has {diagram.model.getNodes().length} nodes.</>}
        {!diagram && <>Loading...</>}
    </div>
}

This hook will only return a value if your component is a descendant in the JSX of a DiagramProvider or DiagramComponent, for instance:


import MyComponent from "./my-component"
import { DiagramProvider, DiagramComponent } from "@visuallyjs/browser-ui-react"

export default function MyApp() {
    
    return <DiagramProvider>
        <DiagramComponent data={...} options={...}/>
        <MyComponent/>
    </DiagramProvider>
}