react-json-view

React-json-view is a lightweight and highly customizable React component designed to display JSON (JavaScript Object Notation) data in an interactive, tree-like, and human-readable format. It's an invaluable tool for debugging, data visualization, and enhancing the user experience in React applications that need to present structured data to users or developers.

Key Features and Benefits:
* Interactive Display: Allows users to expand and collapse JSON nodes, making large data structures easier to navigate.
* Syntax Highlighting: Automatically color-codes different data types (strings, numbers, booleans, null, objects, arrays) for improved readability.
* Customizable Themes: Supports various built-in themes to match the application's aesthetic, or allows for custom styling.
* Copy to Clipboard: Provides an option to copy the value of individual nodes or the entire JSON structure to the clipboard.
* Search Functionality: Some implementations or versions may offer search capabilities to find specific keys or values.
* Edit/Add/Delete Functionality: Can be configured to allow users to directly modify, add new key-value pairs, or delete existing ones within the displayed JSON (useful for development tools).
* Display Options: Offers props to control whether object sizes or data types are displayed next to each node.
* React-Native Support: While the primary library targets web, there are often adaptations or similar libraries for React Native.

Why use react-json-view?
* Debugging: Quickly inspect the structure and content of complex API responses or state objects.
* Data Visualization: Present structured data to end-users in an understandable format, such as configuration details, user profiles, or log data.
* Development Tools: Build powerful developer tools or admin panels that require editing or viewing raw JSON data.

Installation:
You can install `react-json-view` using npm or yarn:
`npm install react-json-view`
or
`yarn add react-json-view`

Basic Usage:
The component is straightforward to use. You import the `ReactJson` component and pass your JSON data as the `src` prop. Many other props are available for customization.

Example Code

import React from 'react';
import ReactJson from 'react-json-view';

function JsonViewer() {
  const sampleJsonData = {
    user: {
      id: 123,
      name: "Alice Smith",
      email: "alice.smith@example.com",
      isActive: true,
      roles: ["admin", "editor"],
      lastLogin: "2023-10-27T10:30:00Z",
      address: {
        street: "123 Main St",
        city: "Anytown",
        zip: "12345"
      },
      preferences: null,
      orderHistory: [
        {
          orderId: "A001",
          items: [
            { productId: "P1", quantity: 2, price: 10.50 },
            { productId: "P2", quantity: 1, price: 25.00 }
          ],
          total: 46.00,
          date: "2023-09-15"
        },
        {
          orderId: "A002",
          items: [{ productId: "P3", quantity: 3, price: 5.75 }],
          total: 17.25,
          date: "2023-10-01"
        }
      ]
    },
    application: {
      version: "1.0.0",
      settings: {
        theme: "dark",
        notificationsEnabled: true
      },
      features: [
        "dashboard",
        "reporting",
        "analytics"
      ]
    },
    status: "success",
    timestamp: 1678886400000,
    errors: []
  };

  const handleEdit = (edit) => {
    console.log('JSON Edited:', edit);
    // In a real application, you would update your component's state or perform an API call here
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'monospace' }}>
      <h1>React JSON View Example</h1>
      <p>This is an interactive JSON viewer component displaying complex data.</p>
      <div style={{ border: '1px solid #ccc', borderRadius: '4px', overflow: 'hidden' }}>
        <ReactJson 
          src={sampleJsonData} 
          theme="monokai" 
          name="MyAppData" 
          collapsed={1} 
          enableClipboard={true} 
          displayObjectSize={true} 
          displayDataTypes={false}
          onEdit={handleEdit}
          onAdd={handleEdit}
          onDelete={handleEdit}
          sortKeys={true}
        />
      </div>

      <h2 style={{marginTop: '30px'}}>Another Example (Minimal)</h2>
      <div style={{ border: '1px solid #ccc', borderRadius: '4px', overflow: 'hidden' }}>
        <ReactJson 
          src={{"id": 1, "name": "Simple Item", "value": 123.45}} 
          theme="rjv-default" 
          collapsed={false}
        />
      </div>
    </div>
  );
}

export default JsonViewer;

Example Code

Related Topics