Registry / web-framework / react-json-view

react-json-view

library1.21.3jsnpmunverified

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.

web-framework serialization

npm install react-json-view

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-JSON-VIEW

react-json-view

web-frameworkjavascriptv1.21.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReactJson

✓ import ReactJson from 'react-json-view'

✗ 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`.

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;

Debug

Known issues

gotchaThe 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'`.

affects: >=1.0.0

gotchaJSON 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.

affects: >=1.0.0

gotchaThe `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.

affects: >=1.0.0

gotchaThe 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.

affects: <=1.x.x

Errors

Common errors & fixes

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.

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.

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`.

Upgrade

Version history

1.21.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency: required for rendering React components.

react-domrequiredPeer dependency: required for rendering React components to the DOM.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/mac-s-g/react-json-view ↗

packagehttps://www.npmjs.com/package/react-json-view ↗