{"id":13450682,"url":"https://github.com/lloydzhou/react-x6","last_synced_at":"2025-04-11T12:42:09.408Z","repository":{"id":81283714,"uuid":"606144430","full_name":"lloydzhou/react-x6","owner":"lloydzhou","description":"react-reconciler to render x6 object","archived":false,"fork":false,"pushed_at":"2023-03-21T23:26:46.000Z","size":222,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T09:01:43.971Z","etag":null,"topics":["antv","antv-x6","react-reconciler","x6"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lloydzhou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-02-24T17:45:46.000Z","updated_at":"2025-02-07T23:43:48.000Z","dependencies_parsed_at":"2024-04-06T03:32:19.601Z","dependency_job_id":"e63e6d31-0003-4055-9c21-463ea8f1ac20","html_url":"https://github.com/lloydzhou/react-x6","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.052631578947368474","last_synced_commit":"0c4ec7f908e4a9d46724b8ef41431038573989d4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Freact-x6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Freact-x6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Freact-x6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydzhou%2Freact-x6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lloydzhou","download_url":"https://codeload.github.com/lloydzhou/react-x6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248402524,"owners_count":21097330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antv","antv-x6","react-reconciler","x6"],"created_at":"2024-07-31T07:00:37.280Z","updated_at":"2025-04-11T12:42:09.083Z","avatar_url":"https://github.com/lloydzhou.png","language":"TypeScript","funding_links":[],"categories":["Frameworks"],"sub_categories":["React Component"],"readme":"# react-x6\n\n\u003ca href=\"https://www.npmjs.com/package/react-x6\"\u003e\u003cimg alt=\"NPM Package\" src=\"https://img.shields.io/npm/v/react-x6.svg?style=flat-square\"\u003e\u003c/a\u003e\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-x6?style=flat-square)\n![npm](https://img.shields.io/npm/dm/react-x6?style=flat-square)\n\u003ca href=\"/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/lloydzhou/react-x6?style=flat-square\" alt=\"MIT License\"\u003e\u003c/a\u003e\n\n## 提供自定义渲染器在react中直接渲染x6画布\n\n1. 使用`react-reconciler`自定义渲染器\n2. 只需抽象create/update/removeFrom既可\n3. 最后渲染出来的instance就是Graph/Node/Edge对象，这些对象使用ref可以直接绑定\n4. Graph内部将Children做进一步处理，通过cloneElement强行生成带key的子组件（避免list diff导致元素id变化）\n\n## 安装\n```\nnpm install react-x6\nyarn add react-x6\n```\n\n## demo\n\n[online demo](https://codesandbox.io/s/react-x6-demo-nhogrp?file=/src/App.js)\n\n```\nimport { Graph, Node, Edge } from 'react-x6'\nimport { Snapline } from \"@antv/x6-plugin-snapline\";\n\n// 使用ElementOfPlugin定义组件\nconst SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)\n\n\nexport default function App() {\n  // ...\n  return (\n    \u003cGraph background grid width={800} height={600}\u003e\n      \u003cSnaplinePlugin key=\"snapline\" enabled={true}/\u003e\n      \u003cNode id=\"1\" x={100} y={100} label=\"node1\" width={80} height={40}\u003e\u003c/Node\u003e\n      \u003cNode id=\"3\" x={200} y={100} label=\"node3\" width={80} height={40} parent=\"1\" /\u003e\n      \u003cNode id=\"2\" x={200} y={200} label=\"node2\" width={80} height={40} /\u003e\n      \u003cNode id=\"4\" x={200} y={250} label=\"node4\" width={80} height={40} ref={node4} /\u003e\n      \u003cNode id=\"5\" x={300} y={250} label=\"node5\" width={80} height={40} onClick={e =\u003e {\n        console.log('onClick', e)\n      }} /\u003e\n      \u003cEdge source=\"1\" target=\"2\" /\u003e\n    \u003c/Graph\u003e\n  )\n}\n```\n\n## TODO\n- [x] 提供渲染器\n- [x] Graph组件\n- [x] Node/Edge组件\n- [x] ElementOfPlugin函数方便封装官方plugin\n- [x] Label(Edge)\n- [x] NodePort\n- [x] NodeTool/EdgeTool\n- [x] SourceMarker/TargetMarker\n\n\n## changelog\n\n### 2023-03-22\nremove Fragment, using flat array\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydzhou%2Freact-x6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flloydzhou%2Freact-x6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydzhou%2Freact-x6/lists"}