json-viewer

适用于 React 的 json 查看组件。

Demo

1. 安装

npm i @swordtooth/json-viewer

2. 引入

import JSONViewer from '@swordtooth/json-viewer'

3. 使用

<JSONViewer
	//...
/>

props 列表

| 名称 | 类型 | 默认值 | 说明 | |----------------------|------------|-------------------------------|--------------------------| | json | String | 无默认值，必填项 | 数据源，要求是 json 字符串 | | width | String | 100% | json 块的宽度 | | height | String | 无默认值，不填则默认全部展示，不会出现滚动条 | json 块的最大高度，超过该值会展示滚动条 | | isShowLineNumber | Boolean | true | 是否显示行号 | | canCollapse | Boolean | true | 是否开启折叠功能，复杂类型的字段才会出现折叠按钮 | | isShowCopy | Boolean | true | 是否显示复制按钮，点击后可复制 json | | onCopy | Function | 无默认值，如果开启了 isShowCopy，则为必填项 | 点击复制按钮的回调函数，参数为 json 对象 | | isShowFooter | Boolean | true | 是否开启 Footer | | isEmptyObjectOneLine | Boolean | false | 空对象或者空数组是否显示在一行，会影响最终的行数 |