react-x6

!npm bundle size
!npm

提供自定义渲染器在react中直接渲染x6画布

1. 使用react-reconciler自定义渲染器
2. 只需抽象create/update/removeFrom既可
3. 最后渲染出来的instance就是Graph/Node/Edge对象，这些对象使用ref可以直接绑定
4. Graph内部将Children做进一步处理，通过cloneElement强行生成带key的子组件（避免list diff导致元素id变化）

安装

``
npm install react-x6
yarn add react-x6
`

demo

online demo

`
import { Graph, Node, Edge } from 'react-x6'
import { Snapline } from "@antv/x6-plugin-snapline";

// 使用ElementOfPlugin定义组件
const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)


export default function App() {
// ...
return (






{
console.log('onClick', e)
}} />


)
}
``

TODO

- [x] 提供渲染器
- [x] Graph组件
- [x] Node/Edge组件
- [x] ElementOfPlugin函数方便封装官方plugin
- [x] Label(Edge)
- [x] NodePort
- [x] NodeTool/EdgeTool
- [x] SourceMarker/TargetMarker

changelog

$3

remove Fragment, using flat array