https://github.com/lloydzhou/react-x6

react-reconciler to render x6 object
https://github.com/lloydzhou/react-x6

antv antv-x6 react-reconciler x6

Last synced: 27 days ago
JSON representation

react-reconciler to render x6 object

• Host: GitHub
• URL: https://github.com/lloydzhou/react-x6
• Owner: lloydzhou
• License: mit
• Created: 2023-02-24T17:45:46.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-03-21T23:26:46.000Z (almost 2 years ago)
• Last Synced: 2024-11-25T01:11:08.730Z (about 1 month ago)
• Topics: antv, antv-x6, react-reconciler, x6
• Language: TypeScript
• Homepage:
• Size: 217 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-x6 - react-x6 - Using custom [react-reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler) to render x6 object in react. (Frameworks / React Component)

README

        
# react-x6



![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-x6?style=flat-square)

![npm](https://img.shields.io/npm/dm/react-x6?style=flat-square)



## 提供自定义渲染器在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](https://codesandbox.io/s/react-x6-demo-nhogrp?file=/src/App.js)

```

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

### 2023-03-22

remove Fragment, using flat array