中文文档 | English Version

A beautiful, customizable JSON viewer component for React with dark/light theme support and intuitive navigation.

• � Light and dark theme support
• 🔍 Expandable/collapsible nodes
• 🌲 Tree view for nested objects and arrays
• 🎯 Type-specific styling
• � Responsive design
• � Customizable styling
• 📦 Small bundle size
• 💪 TypeScript support

# 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'; // Import styles

const App = () => {
  const [theme, setTheme] = useState('light');
  const [expanded, setExpanded] = useState(false);
  
  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]
      }
    }
  };

  return (
    <div>
      <div>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          Toggle {theme === 'light' ? 'Dark' : 'Light'} Mode
        </button>
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? 'Collapse' : 'Expand'} All
        </button>
      </div>
      
      <JsonViewer 
        data={data} 
        theme={theme}
        initialExpanded={expanded}
      />
    </div>
  );
};

export default App;

Prop	Type	Default	Description
data	any	Required	The JSON data to display
theme	'light' | 'dark'	'light'	The color theme to use
initialExpanded	boolean	false	Whether to expand all nodes initially
maxDepth	number	Infinity	Maximum depth to render
indentWidth	number	16	Width of each indentation level in pixels
className	string	''	Additional CSS class for the root element
style	React.CSSProperties	{}	Additional inline styles for the root element

You can customize the appearance by overriding the CSS variables:

:root {
  /* Light theme variables */
  --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;
  
  /* Dark theme variables */
  --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 License © 2023 DongDong

See LICENSE for full license text.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Run tests
npm run test