68

0

React Flow

一个高度可定制的 React 组件,用于构建交互式图形和基于节点的编辑器。

自述文件头

GitHub 许可证 npm 下载 GitHub 回购星星 GitHub 发布(按日期最新)

用 React Flow 连接你的想法!

一个高度可定制的 React 组件,用于构建交互式图形和基于节点的编辑器。

🚀入门|📖文档|📺示例|☎️discord|💎reactflow专业版


主要特征

  • 易于使用: 开箱即用支持无缝缩放和平移、图形元素的单选和多选以及键盘快捷键
  • 可定制: 不同的节点边类型,并支持具有多个手柄和自定义边的自定义节点
  • 快速渲染: 仅重新渲染已更改的节点,并且仅显示视口中的节点
  • Hooks and Utils:用于处理节点、边以及视口和图形辅助函数的钩子
  • 插件组件: 背景小地图控件
  • 可靠 :用Typescript 编写并用cypress测试

商业用途/归属

React Flow 包含一个链接到 React Flow 网站的小属性。我们希望那些在商业上使用 React Flow 的公司如果想要删除归因, 可以订阅React Flow Pro 。 通过订阅,您可以获得其他独家服务,例如高级示例、个人支持或优先级错误报告。在非商业应用中,您可以在不订阅的情况下隐藏归属,但欢迎在 Github 上赞助我们

您可以在我们的React Flow Pro 常见问题解答中找到更多信息。

安装

获取最新版本的 React Flow 最简单的方法是通过 npm 安装它:

npm install react-flow-renderer

快速开始

这只是 React Flow 的一个非常基本的使用示例。要查看该库的所有功能,请参阅网站以获取指南示例API 参考

import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';

function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    >
      <MiniMap />
      <Controls />
    </ReactFlow>
  );
}

发展

在开始之前,您需要使用 npm run build. npm install然后通过和示例安装 React Flow 依赖项 cd example && npm install

如果您想贡献或开发自定义功能,最简单的方法是启动开发服务器:

npm start

和示例应用程序通过:

cd example && npm start

示例应用程序提供 example文件夹的内容并监视文件夹内的更改 src。这些示例使用 src文件夹的源。

测试

测试是用柏树完成的。您可以在integration/flow文件夹中找到测试。为了运行测试,请执行以下操作:

npm run test

维护者

React Flow 由webkid开发和维护,webkid是一家专注于柏林数据驱动应用程序的网络开发机构。如果您需要帮助或想与我们讨论合作事宜,请随时联系我们:

您也可以使用我们的联系表格或加入React Flow Discord Server

社区套餐

学分

React Flow 最初是为datablocks开发的,这是一个基于图形的编辑器,用于在浏览器中转换、分析和可视化数据。在底层,React Flow 依赖于这些优秀的库:

  • d3-zoom - 用于与图形画布进行缩放、平移和拖动交互
  • d3-drag - 用于使节点可拖动
  • zustand - 内部状态管理

执照

React Flow 是MIT 许可的。