一个美观、可定制的React JSON查看器组件，支持深色/浅色主题和直观的导航。

• 🎨 支持浅色和深色主题
• 🔍 可展开/折叠的节点
• 🌲 嵌套对象和数组的树状视图
• 🎯 类型特定的样式
• 📱 响应式设计
• 🔧 可自定义样式
• 📦 小巧的打包体积
• 💪 支持TypeScript

# npm
npm install react-json-viewer-pretty

# yarn
yarn add react-json-viewer-pretty

# pnpm
pnpm add react-json-viewer-pretty

import React, { useState } from 'react';
import { JsonViewer } from 'react-json-viewer-pretty';
import 'react-json-viewer-pretty/style.css'; // 导入样式

const App = () => {
  const [theme, setTheme] = useState('light');
  const [expanded, setExpanded] = useState(false);
  const [maxDepth, setMaxDepth] = useState(5);
  const [indentWidth, setIndentWidth] = useState(16);
  
  const data = {
    string: "Hello, world!",
    number: 42,
    boolean: true,
    null: null,
    array: [1, 2, 3, "four", { five: 5 }],
    object: {
      a: 1,
      b: "two",
      c: {
        nested: "value",
        anotherNested: [1, 2, 3],
        deeplyNested: {
          level1: {
            level2: {
              level3: "深层嵌套值"
            }
          }
        }
      }
    }
  };

  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          切换 {theme === 'light' ? '深色' : '浅色'} 模式
        </button>
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? '折叠' : '展开'} 全部
        </button>
        <label style={{ marginLeft: '10px' }}>
          最大深度:
          <input 
            type="number" 
            value={maxDepth} 
            onChange={(e) => setMaxDepth(Number(e.target.value))}
            min={1}
            style={{ width: '50px', marginLeft: '5px' }}
          />
        </label>
        <label style={{ marginLeft: '10px' }}>
          缩进宽度:
          <input 
            type="number" 
            value={indentWidth} 
            onChange={(e) => setIndentWidth(Number(e.target.value))}
            min={8}
            max={32}
            style={{ width: '50px', marginLeft: '5px' }}
          />
        </label>
      </div>
      
      <JsonViewer 
        data={data} 
        theme={theme}
        initialExpanded={expanded}
        maxDepth={maxDepth}
        indentWidth={indentWidth}
      />
    </div>
  );
};

export default App;

属性	类型	默认值	描述
data	any	必填	要显示的JSON数据
theme	'light' | 'dark'	'light'	使用的颜色主题
initialExpanded	boolean	false	是否初始展开所有节点
maxDepth	number	Infinity	最大渲染深度
indentWidth	number	16	每个缩进级别的宽度(像素)
className	string	''	根元素的额外CSS类
style	React.CSSProperties	{}	根元素的额外内联样式

maxDepth 属性允许你控制 JSON 数据的展开深度。当嵌套层级超过指定的 maxDepth 值时，更深层级的数据将以折叠形式显示。这对于展示大型复杂 JSON 数据特别有用，可以防止视图过于复杂。

// 只展开到第 3 层深度
<JsonViewer data={complexData} maxDepth={3} initialExpanded={true} />

indentWidth 属性允许你自定义每级缩进的宽度（以像素为单位）。默认值为 16 像素，你可以根据需要增加或减少这个值来调整视觉效果。

// 使用更宽的缩进（24像素）
<JsonViewer data={data} indentWidth={24} />

// 使用更窄的缩进（8像素）
<JsonViewer data={data} indentWidth={8} />

你可以通过覆盖CSS变量来自定义外观：

:root {
  /* 浅色主题变量 */
  --json-viewer-light-background: #ffffff;
  --json-viewer-light-text: #333333;
  --json-viewer-light-string: #008000;
  --json-viewer-light-number: #0000ff;
  --json-viewer-light-boolean: #ff8c00;
  --json-viewer-light-null: #808080;
  --json-viewer-light-key: #a52a2a;
  --json-viewer-light-bracket: #333333;
  --json-viewer-light-border: #e0e0e0;
  
  /* 深色主题变量 */
  --json-viewer-dark-background: #1e1e1e;
  --json-viewer-dark-text: #d4d4d4;
  --json-viewer-dark-string: #6a9955;
  --json-viewer-dark-number: #569cd6;
  --json-viewer-dark-boolean: #dcdcaa;
  --json-viewer-dark-null: #808080;
  --json-viewer-dark-key: #9cdcfe;
  --json-viewer-dark-bracket: #d4d4d4;
  --json-viewer-dark-border: #444444;
}

MIT 许可证 © 2025 DongDong

查看 LICENSE 获取完整的许可证文本。

欢迎贡献！请随时提交Pull Request。

1. Fork 仓库
2. 创建你的特性分支 (git checkout -b feature/amazing-feature)
3. 提交你的更改 (git commit -m '添加一些很棒的特性')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开一个Pull Request

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

# 运行测试
npm run test