React-Flow-Chart：适用于React的灵活、无状态、声明式流程图库-ITADN社区

React-Flow-Chart：适用于React的灵活、无状态、声明式流程图库

优质

React-Flow-Chart是一款专为React设计的轻量级图表库，支持创建灵活且无状态的流程图。它采用声明式的API，简化了复杂流程图的设计与维护过程。该项目旨在构建一个高度可定制的声明式流程图库，核心在于用户可以自由控制状态管理方式。无论是使用Redux、MobX还是React自带的状态管理机制，抑或是其他任何框架或库，只需传递当前状态并连接回调即可实现所需功能。具体而言： - 实现了拖拽节点和画布的功能。 - 支持在端口之间创建弯曲的链接。 - 提供自定义组件以增强画布、链接、端口以及节点的表现力与功能性。 - 设计了一个React状态容器，用于更新选择悬停时的状态信息（包括节点、端口及连接）。 - 基本功能已经完成，并发布了稳定的NPM版本。 - 允许用户通过滚动和捏合操作缩放画布。 - 支持Ctrl + z 和 Ctrl + y 进行撤销与重做历史记录的操作，同时提供唯读模式以限制编辑权限。此外： - 引入了Redux状态容器来进一步优化流程图的状态管理能力。 - 添加链接上的箭头指示器，增强视觉效果和用户体验。数据结构方面：该库被设计为由节点、端口以及连接组成。

React Flow是一款高灵活性库，适用于创建节点式的互动编辑器、流程图及图表-React开发

优质

React Flow是专为React设计的高度灵活的库，用于构建交互式编辑器、流程图和图表，提供强大的定制选项以满足多样化需求。 React Flow 是一个用于构建基于节点的图的库。您可以轻松实现自定义节点类型，并且它附带了一些组件，例如迷你地图和图形控件。随意查看示例或阅读博客文章以开始使用。关键功能包括： - 安装与用法说明 - ReactFlow 组件及其属性 - 类型、节点选项及节点类型的定制化处理 - 边缘选项以及边缘类型的设计自定义 - Edge Utils组件的应用 - 背景设置和 Minimap 控件的使用方法此外，ReactFlowProvider 和样式帮助也提供了丰富的功能支持。

React-Request：用于React的声明式HTTP请求

优质

React-Request是一款专为React设计的库，它提供了一种声明式的处理HTTP请求的方法。通过使用此库，开发者能够更简洁、高效地在React应用中管理数据获取和更新流程。在JavaScript中发出单个HTTP请求并不困难。然而，在复杂的Web应用程序中，用户浏览过程中通常会触发许多这样的请求。为了减少重复数据的获取并缓存响应以避免错误，这些功能对于开发人员来说至关重要。尽管可以手动实现这些特性，但这需要编写额外代码，并且测试过程可能较为繁琐。为了解决这些问题，声明式的API提供了一种更简便的方法。这就是React Request出现的原因：它是一个适用于React中的HTTP请求的后端无关的声明式解决方案，其内置的数据去重和缓存功能让开发体验更加愉悦。产品特点包括： - 使用本地API - 智能设计 - 易于使用

React-Org-Chart：简洁的React组织架构图

优质

React-Org-Chart是一款用于构建简洁、直观组织结构图的React组件库。它帮助开发者轻松创建和管理企业层级关系图表，适用于各种规模的应用程序。 React组织结构图组件用于展示组织架构图。此组件基于D3库，并在此基础上添加了一些定制功能以满足特定需求。该组件的特性包括： - 基于D3的高性能SVG渲染； - 具备延迟加载子项的能力，适用于处理多达一百万个折叠节点和5,000个扩展节点； - 支持平移（拖放）操作及放大缩小功能（通过鼠标滚轮或滚动实现）； - 提供懒惰父母机制，在树形结构中向上移动时发挥作用； - 包含用于放大、缩小和缩放的按钮，以及以图片或PDF格式下载组织图的功能。我们在此基础上新增了以下特性： React属性及描述如下： | 属性 | 类型 | 描述 | | --- | ---- | ---- | | tree | Object | 公司内所有员工嵌套数据模型（必填）| | nodeWidth | Number | 每个节点的宽度（可选，默认值为180px） | | nodeHeight | Number | 节点的高度（可选，默认值为100px） | | nodeSpacing | Number | 图表中每个节点之间的间距（可选，默认值为12像素） | 请参考下面的示例。

G2Plot-React：适用于React的G2Plot

优质

G2Plot-React是专为React开发者设计的数据可视化解决方案，它基于蚂蚁金服的G2Plot图表库，提供了丰富的图表组件和灵活的配置选项。 @opd g2plot-react 用于React的安装 ```bash npm install @opdg2plot-react ``` 用法： ```javascript import React, { useRef } from react; import { LineChart, LineChartProps } from @opdg2plot-react; const config: LineChartProps = { height: 350, autoFit: true, xField: year, yField: value, smooth: true }; ```

React Fishbone Chart: 反应式鱼骨图插件

优质

React Fishbone Chart是一款专为React应用设计的反应式鱼骨图插件，能够帮助开发者轻松创建和定制专业的鱼骨分析图表。鱼骨图（React的鱼骨图）安装： ```bash npm i react-fishbone-chart ``` 如何使用： ```javascript import React from react; import {FishboneChart} from react-fishbone-chart; const initData = { data: [a, b, c, d, e, f, g, h, k], speed: 28, }; const App = () => { return (

{/* 子元素 */}

); }; export default App; ```

React-Layers：适用于OpenLayers的React组件库（开发中）

优质

React-Layers是一款正在开发中的开源库，旨在为使用OpenLayers的地图开发者提供一系列可重用的React组件。通过简化地图元素和交互功能的创建过程，它帮助开发者更高效地构建复杂的地理信息系统应用程序。 React-layers 是一套专为 OpenLayers 设计的 React 组件集合。其设计理念是：对于所有面向用户的操作采用纯 React 方式处理（例如 onClick 和 OnPointerEnter/OnPoinerLeave 处理程序），而对于不直接面向用户的部分则可以使用原生 OpenLayers 的方式实现；内部组件通过继承和组合来遵循 OpenLayers 类的设计，以简化复杂度。其目标是完整地公开高级的 OpenLayers 功能——如果无法做到这一点，则考虑使用 Leaflet 可能更为合适。此外，项目力求在服务器端渲染（SSR）方面友好，并计划在未来推出相关功能。React-layers 目前针对的是 OpenLayers 6+ 版本进行构建，在构建时除了 React 和 OpenLayers 外不依赖任何其他库或框架；尽管示例代码可能包含一些额外的依赖项。值得注意的是，这个项目与已在 OpenLayers 3 上停止更新的 react-openlayers 没有任何关联。实际上，React-layers 在很多方面都超越了后者的设计和实现水平。

React-Quill：适用于React的Quill组件

优质

React-Quill是一款专为React框架设计的富文本编辑器组件，基于流行的Quill库。它提供了强大的文本格式化功能和高度定制化的选项，帮助开发者轻松集成到项目中。 ReactQuill 的组件。请观看或查阅文档——这是 ReactQuill v2 的文档；先前版本的链接已不再提供。 :hundred_points: 欢迎使用 ReactQuill 2！这个新版本为 TypeScript 和 React 16+ 提供了完整的端口，重构了构建系统，并且内部逻辑也得到了全面加强。我们尽量避免引入任何行为上的改变，在绝大多数情况下，根本不需要进行迁移工作。不过，请注意已删除对弃用的属性、ReactQuill Mixin 及工具栏组件的支持。请帮助我们在 Beta 测试期间发现潜在问题并最终完成此发行版本！要尝试新版本，只需更新依赖项：npm install react-quill@beta

React-Flow: 高度可定制的库，适用于创建基于节点的互动UI、编辑器、流程图及图表

优质

React-Flow 是一个高度灵活且可定制的React库，用于构建交互式的节点界面、编辑器和流程图。它为开发者提供了丰富的功能与组件，简化了复杂图形应用的设计过程。 React Flow 是一个用于构建基于节点的图的库。您可以轻松实现自定义节点类型，并且它附带一些组件，例如迷你地图和图形控件。安装： ``` npm install react-flow-renderer ``` 快速开始：这是一个如何使用 React Flow 的非常基本示例。您可以在文档中找到更多高级示例。 ``` import React from react; import ReactFlow from react-flow-renderer; const elements = [ ```

React FineUploader - 一个灵活且强大的文件上传React组件

优质

React FineUploader 是一款专为React设计的强大而灵活的文件上传组件。它支持多种高级功能和配置选项，让开发者能够轻松实现复杂的文件上传需求。 React Fine Uploader 是一个灵活且强大的文件上传 React 组件。

是否确定退出登录?

React-Flow-Chart：适用于React的灵活、无状态、声明式流程图库

全部评论 (0)