React JSON View Component

Common errors

• Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

  cause The `ReactJson` component was not imported correctly, typically by attempting a named import for a default export or incorrect CommonJS `require` usage.
  fix Ensure you are using the correct default import syntax: `import ReactJson from 'react-json-view'`. If using CommonJS, explicitly access the default export: `const ReactJson = require('react-json-view').default`.

• TypeError: Cannot read properties of undefined (reading 'setState') or similar runtime errors related to React internals.

  cause Mismatch between the `react` or `react-dom` peer dependency versions and the versions installed in your project, leading to incompatible React APIs being used.
  fix Check your `package.json` for `react` and `react-dom` versions and ensure they satisfy the `react-json-view` peer dependency range (`^17.0.0 || ^16.3.0 || ^15.5.4`). Run `npm install` or `yarn install` to resolve dependencies. For React 18+, consider using `@microlink/react-json-view`.

Warnings

• gotcha The original `mac-s-g/react-json-view` project is no longer actively maintained. For ongoing support, new features, and TypeScript improvements, consider using the community-maintained fork `@microlink/react-json-view`.
  Fix: Migrate to `@microlink/react-json-view` by installing `npm install @microlink/react-json-view` and updating imports to `import ReactJson from '@microlink/react-json-view'`.
• gotcha JSON editing functionality (add, edit, delete) is disabled by default. To enable it, you must pass callback functions to the `onEdit`, `onAdd`, and `onDelete` props.
  Fix: Provide a function to `onEdit`, `onAdd`, or `onDelete` (e.g., `onEdit={myEditCallback}`) to activate the respective editing capabilities. Returning `false` from these callbacks will prevent the update.
• gotcha The `collapsed` prop accepts either a boolean (`true`/`false`) to collapse/expand all nodes, or an integer to specify the depth at which nodes should be collapsed. Misunderstanding this can lead to unexpected display behavior.
  Fix: Use `collapsed={true}` to collapse everything, `collapsed={false}` to expand everything, or `collapsed={N}` where `N` is an integer for specific depth collapsing. For more granular control, use the `shouldCollapse` callback prop.
• gotcha The peer dependencies for `react` and `react-dom` are specific. Using versions outside the `^17.0.0 || ^16.3.0 || ^15.5.4` range may lead to compatibility issues or unexpected runtime errors, particularly with newer React versions (e.g., React 18+).
  Fix: Ensure your project's `react` and `react-dom` versions fall within the specified peer dependency range. If using React 18+, consider using the `@microlink/react-json-view` fork, which explicitly supports newer React versions.

Install

• npm install react-json-view npm
• yarn add react-json-view yarn
• pnpm add react-json-view pnpm

Imports

• ReactJson
  wrong:

  import { ReactJson } from 'react-json-view'

  correct:

  import ReactJson from 'react-json-view'

  The primary component `ReactJson` is a default export. Attempting a named import (e.g., `{ ReactJson }`) will result in `undefined`. For CommonJS environments, you might need to access the default export via `const ReactJson = require('react-json-view').default`.

Quickstart

Demonstrates how to integrate `ReactJson` into a functional React component, displaying a sample JSON object with various data types. It shows how to enable editing, adding, and deleting properties using the `onEdit`, `onAdd`, and `onDelete` callbacks, and configures several display options like themes, collapse depth, and data types.

import React, { useState } from 'react';
import ReactJson from 'react-json-view';

function MyJsonViewer() {
  const [jsonData, setJsonData] = useState({
    id: 1,
    name: 'Sample Product',
    price: 29.99,
    inStock: true,
    tags: ['electronics', 'gadget', 'sale'],
    details: {
      manufacturer: 'TechCorp',
      weight: '1.5 kg',
      dimensions: { width: '10cm', height: '5cm', depth: '2cm' }
    },
    reviews: [
      { user: 'Alice', rating: 5, comment: 'Great product!' },
      { user: 'Bob', rating: 4, comment: 'Good value for money.' }
    ],
    lastUpdated: new Date().toISOString()
  });

  const handleEdit = (edit) => {
    console.log('JSON Edited:', edit);
    // In a real app, you would typically update your state or send to an API
    // For this example, we'll update the local state if onEdit is used.
    setJsonData(edit.updated_src);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h2>Interactive JSON Viewer</h2>
      <p>This component displays and allows modification of JSON objects.</p>
      <ReactJson
        src={jsonData}
        name="productData"
        theme="monokai"
        iconStyle="triangle"
        collapsed={1} // Collapse objects at depth 1 by default
        enableClipboard={true}
        displayObjectSize={true}
        displayDataTypes={false}
        onEdit={handleEdit}
        onAdd={handleEdit} // Enable add functionality
        onDelete={handleEdit} // Enable delete functionality
        indentWidth={4}
        groupArraysAfterLength={5}
      />
      <div style={{ marginTop: '20px', backgroundColor: '#f0f0f0', padding: '15px' }}>
        <h3>Current State (JSON.stringify):</h3>
        <pre>{JSON.stringify(jsonData, null, 2)}</pre>
      </div>
    </div>
  );
}

export default MyJsonViewer;