Advertisement

React-JSON-Editor-AJRM：一个模块化的、易用的React组件，适用于JavaScript对象的查看、编辑与调试...

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型：ZIP

简介：
React-JSON-Editor-AJRM是一款易于使用的React组件，提供模块化界面来浏览、编辑和调试复杂的JavaScript对象。 react-json-editor-ajrm 是一个时尚的、类似编辑器的模块化 React 组件，用于查看、编辑和调试 JavaScript 对象语法。 安装依赖： 使用 Node 包管理器： ``` $ npm i --save react-json-editor-ajrm ``` 如何使用： ```javascript import JSONInput from react-json-editor-ajrm; import locale from react-json-editor-ajrm/locale/en; ```

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • React-JSON-Editor-AJRM：一个模块化的、易用的React组件，适用于JavaScript对象的查看、编辑与调试...
    优质
    React-JSON-Editor-AJRM是一款易于使用的React组件，提供模块化界面来浏览、编辑和调试复杂的JavaScript对象。 react-json-editor-ajrm 是一个时尚的、类似编辑器的模块化 React 组件，用于查看、编辑和调试 JavaScript 对象语法。 安装依赖： 使用 Node 包管理器： ``` $ npm i --save react-json-editor-ajrm ``` 如何使用： ```javascript import JSONInput from react-json-editor-ajrm; import locale from react-json-editor-ajrm/locale/en; ```
     
  • React-Monaco-Editor：适用于React的摩纳哥编辑器
    优质
    React-Monaco-Editor是一款专为React应用设计的代码编辑组件，它集成了微软的摩纳哥编辑器（与VS Code同源），提供强大的代码编辑功能和高度可定制性。 要在本地构建 React 摩纳哥编辑器示例，请运行以下命令： ```shell yarn cd example yarn start ``` 然后在浏览器中打开 `http://localhost:8886`。 安装 `react-monaco-editor` 可以使用如下命令：`yarn add react-monaco-editor`。与 Webpack 一起使用的示例如下： ```javascript import React from react; import { render } from react-dom; import MonacoEditor from react-monaco-editor; class App extends React.Component { // 组件内容在此处编写。 } ``` 请根据实际需要在 `App` 类中添加相应的代码。
     
  • React - 一个用于图片预览和查看的React插件
    优质
    这是一款专为React开发者设计的插件，旨在提供高效、便捷的图片预览与查看功能。通过简单的集成，即可增强应用中的媒体展示体验。 这是一个用于图片预览或查看的React插件。
     
  • React-ReactJsonSchemaForm：一个用于从JSON Schema生成Web表单的React组件
    优质
    React-ReactJsonSchemaForm是一款基于React框架开发的工具，它能够通过解析JSON Schema自动生成功能完备且易于定制化的网页表单。这款组件简化了前后端数据交换过程中的表单创建与维护工作，是构建动态、响应式Web应用的理想选择。 react-jsonschema-form 是一个用于从 JSONSchema 构建 Web 表单的 React 组件。
     
  • React-Json-Table：一个简洁的React式表格组件用于展示JSON数据
    优质
    React-Json-Table是一款专为React开发的轻量级、灵活且易于使用的表格组件。它能够高效地解析并展示复杂的JSON数据结构，帮助开发者快速创建动态的数据表视图。 React-Json-Table 是一个简单而灵活的 React 组件，用于显示 JSON 数据。只需提供一系列对象即可使用该组件。 示例代码： ```javascript var items = [ { name: Louise, age: 27, color: red }, { name: Margaret, age: 15, color: blue }, { name: Lisa, age: 34, color: yellow} ]; React.render(, document.body); ``` 特性包括： - 不依赖其他库，采用 UMD 格式。 - 可自定义的单元格内容，以您所需的格式展示数据。 - 提供点击标题、行或单元格时触发回调的功能。 - 支持添加自定义列。 - 拥有充足的 className 属性以便您可以根据需要进行样式重写。
     
  • React-carousel：一个用于React的轮播图组件
    优质
    React-carousel是一款专为React框架设计的轮播图组件库，提供灵活、易于使用的接口来创建具有吸引力的图片和内容滑动展示效果。 这是一个支持手势操作的响应式React轮播图组件。
     
  • 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
     
  • JSON-Schema-Editor-VISUAL: 基于React的高效且用户友好的JSON模式编辑器
    优质
    JSON-Schema-Editor-VISUAL是一款基于React构建的工具，旨在提供一个既高效又直观的界面来创建和修改JSON Schema。 基于React的高效且易于使用的JSON模式编辑器。 用法： ```bash npm install json-schema-editor-visual ``` 导入样式文件： ```javascript import antddistantd.css; require(json-schema-editor-visual/dist/main.css); ``` 创建编辑器组件并传入选项对象，如下所示： ```javascript const schemaEditor = require(json-schema-editor-visual/dist/main.js); const SchemaEditor = schemaEditor({}); render( , document.getElementById(root) ); ``` 选项对象： 名称：`lg` 描述：语言设置。 默认值：未指定。
     
  • WangEditor-for-React：适用于React的WangEditor组件
    优质
    简介：WangEditor-for-React是专为React开发环境设计的富文本编辑器组件。它完美融合了WangEditor的功能与React框架的优势，提供简洁且强大的API，使开发者能够轻松实现丰富的文本编辑功能，极大地提升了前端应用的内容创建和展示能力。 旺旺换React坚守组件` this.setState({ value: e.target.value })} />` ```jsx

    标题

    ``` 使用自定义配置的 ReactWEditor 组件： ```jsx console.log(html:, html)} /> ``` 注意：代码中存在未完整描述的配置项，如`small : {n}`。
     
  • React-Scroll：适用于React的滚动组件
    优质
    简介：React-Scroll是一款专为React应用设计的滚动插件，它提供了简单易用的API来实现平滑滚动、锚点导航等功能，让网页交互更加流畅自然。 React滚动动画垂直滚动的组件。 安装： ``` $ npm install react-scroll ``` 运行： ``` $ npm install $ npm test $ npm start ``` 例子： 结帐示例 现场演示可以通过启动项目查看： ``` $ npm start ``` 用法： ES6 Imports: ```javascript import * as Scroll from react-scroll; import { Link, Element, Events, animateScroll as scroll, scrollSpy, scroller } from react-scroll ``` 或者按如下方式访问Link、Element等组件： ```javascript let Link = Scroll.Link; let Element = Scroll.Element; let Events = Scroll.Events; ```