{"id":12751,"library":"react-json-view","title":"React JSON View Component","description":"React JSON View (RJV) is an interactive React component designed for displaying and optionally editing JavaScript arrays and JSON objects within web applications. The version provided (1.21.3) from the `mac-s-g/react-json-view` repository has announced it is no longer actively maintained. However, an actively maintained fork exists at `@microlink/react-json-view`, which offers ongoing updates, performance improvements, and additional features, including full TypeScript support and a redesigned API in its v2. The original `mac-s-g` version is transpiled to ES5, ensuring broad compatibility. Key differentiators of both versions include extensive theme support (base-16), customizable expand/collapse behavior, optional editing features via callbacks, clipboard functionality, and various display options for data types and object sizes.","status":"maintenance","version":"1.21.3","language":"javascript","source_language":"en","source_url":"https://github.com/mac-s-g/react-json-view","tags":["javascript","array-viewer","base-16","component","interactive","interactive-json","json","json-component","json-display"],"install":[{"cmd":"npm install react-json-view","lang":"bash","label":"npm"},{"cmd":"yarn add react-json-view","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-json-view","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency: required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"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`.","wrong":"import { ReactJson } from 'react-json-view'","symbol":"ReactJson","correct":"import ReactJson from 'react-json-view'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\n\nfunction MyJsonViewer() {\n  const [jsonData, setJsonData] = useState({\n    id: 1,\n    name: 'Sample Product',\n    price: 29.99,\n    inStock: true,\n    tags: ['electronics', 'gadget', 'sale'],\n    details: {\n      manufacturer: 'TechCorp',\n      weight: '1.5 kg',\n      dimensions: { width: '10cm', height: '5cm', depth: '2cm' }\n    },\n    reviews: [\n      { user: 'Alice', rating: 5, comment: 'Great product!' },\n      { user: 'Bob', rating: 4, comment: 'Good value for money.' }\n    ],\n    lastUpdated: new Date().toISOString()\n  });\n\n  const handleEdit = (edit) => {\n    console.log('JSON Edited:', edit);\n    // In a real app, you would typically update your state or send to an API\n    // For this example, we'll update the local state if onEdit is used.\n    setJsonData(edit.updated_src);\n  };\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n      <h2>Interactive JSON Viewer</h2>\n      <p>This component displays and allows modification of JSON objects.</p>\n      <ReactJson\n        src={jsonData}\n        name=\"productData\"\n        theme=\"monokai\"\n        iconStyle=\"triangle\"\n        collapsed={1} // Collapse objects at depth 1 by default\n        enableClipboard={true}\n        displayObjectSize={true}\n        displayDataTypes={false}\n        onEdit={handleEdit}\n        onAdd={handleEdit} // Enable add functionality\n        onDelete={handleEdit} // Enable delete functionality\n        indentWidth={4}\n        groupArraysAfterLength={5}\n      />\n      <div style={{ marginTop: '20px', backgroundColor: '#f0f0f0', padding: '15px' }}>\n        <h3>Current State (JSON.stringify):</h3>\n        <pre>{JSON.stringify(jsonData, null, 2)}</pre>\n      </div>\n    </div>\n  );\n}\n\nexport default MyJsonViewer;","lang":"javascript","description":"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."},"warnings":[{"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'`.","message":"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`.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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+).","severity":"gotcha","affected_versions":"<=1.x.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"The `ReactJson` component was not imported correctly, typically by attempting a named import for a default export or incorrect CommonJS `require` usage.","error":"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."},{"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`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'setState') or similar runtime errors related to React internals."}],"ecosystem":"npm"}