React Flow

用 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是一家专注于柏林数据驱动应用程序的网络开发机构。如果您需要帮助或想与我们讨论合作事宜，请随时联系我们：

• Moritz Klack • Twitter • Github
• Christopher Möller • Twitter • Github

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

社区套餐

• useUndoable - 使用明确的 React Flow 示例挂钩撤消/重做功能
• react-flow-smart-edge - 不与节点相交的自定义边
• Feliz.ReactFlow - 用于 React 流的 Feliz React 绑定

学分

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

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

执照

React Flow 是MIT 许可的。