React Nodes

Rendering Nodes

We provide a standalone package @antv/x6-react-shape for rendering nodes with React.

import { register } from '@antv/x6-react-shape'

const NodeComponent = () => {
  return (
    <div className="react-node">
      <Progress type="circle" percent={30} width={80} />
    </div>
  )
}

register({
  shape: 'custom-basic-react-node',
  width: 100,
  height: 100,
  component: NodeComponent,
})

graph.addNode({
  shape: 'custom-basic-react-node',
  x: 60,
  y: 100,
})

Updating Nodes

Similar to HTML, register a node with an effect field—an array of the node’s props. When any listed prop changes, the React component re-renders.

register({
  shape: 'custom-update-react-node',
  width: 100,
  height: 100,
  effect: ['data'],
  component: NodeComponent,
})

const node = graph.addNode({
  shape: 'custom-update-react-node',
  x: 60,
  y: 100,
  data: {
    progress: 30,
  },
})

setInterval(() => {
  const { progress } = node.getData<{ progress: number }>()
  node.setData({
    progress: (progress + 10) % 100,
  })
}, 1000)

Portal Mode

The approach above renders the component directly into the node’s DOM:

import { createRoot, Root } from 'react-dom/client'

const root = createRoot(container) // container is the node container
root.render(component)

This detaches the component from the normal React tree, so it cannot access external Context. Use Portal mode when you need access to app-level context.

X6

React Nodes

This chapter mainly introduces knowledge related to React nodes. By reading, you can learn

Rendering Nodes

Note

Updating Nodes

Portal Mode