@mingdaocom/json-view

一个基于 React 的 JSON 预览组件，支持对象/数组展开折叠、复制、主题切换。

安装

npm install @mingdaocom/json-view

使用

import JsonPreview from "@mingdaocom/json-view";

const data = {
  name: "Cursor",
  version: "1.0.0",
  features: ["pretty", "simple", "lightweight"]
};

export default function Demo() {
  return <JsonPreview data={data} rootKey="data" theme="dark" />;
}

默认入口会自动注入组件样式，不需要再单独引入 style.css。

脱敏展示 + 原始复制

copyData 适合“页面展示脱敏数据，但复制时需要拿到原始值”的场景。

import JsonPreview from "@mingdaocom/json-view";

const maskedData = {
  user: {
    name: "hexinhui",
    phone: "138****5678",
    idCard: "3301**********1234"
  }
};

const rawData = {
  user: {
    name: "hexinhui",
    phone: "13800005678",
    idCard: "330101199001011234"
  }
};

export default function Demo() {
  return (
    <JsonPreview
      data={maskedData}
      copyData={rawData}
      rootKey="userInfo"
      onCopy={(text, path) => {
        console.log("copied:", text, path);
      }}
    />
  );
}

Props

• data: 要展示的数据，支持对象、数组、JSON 字符串
• copyData: 点击复制时使用的数据源，默认与 data 一致，适合脱敏展示时复制原始数据
• rootKey: 根节点显示名称
• indentSize: 层级缩进宽度，默认 30
• enableClipboard: 是否启用复制，默认 true
• accentColor: key 的高亮颜色
• theme: dark | light | transparent
• onCopy: 复制回调
• className: 外层容器 class
• bodyClassName: 内容区 class
• showGuideLine: 是否显示层级引导线，默认 true

FAQ

为什么有时不显示复制按钮？

默认开启 enableClipboard 时会显示复制按钮。组件内部做了兼容复制实现，会优先尝试较新的剪贴板能力，并在较老浏览器中降级到 textarea + execCommand("copy")。

只有在非浏览器环境里渲染时，复制按钮才不会显示。

copyData 和 data 有什么区别？

• data 用于页面展示
• copyData 用于点击复制时真正写入剪贴板的数据

如果不传 copyData，复制时默认使用 data。

样式会不会重复注入？

不会。组件内部会检查固定的样式节点 id，同一个页面文档中只会注入一次。

一个页面里渲染多个实例可以吗？

可以。多个实例会共用同一份样式，彼此之间只维护自己的折叠状态。

开发

npm install
npm run build