Registry / web-framework / jsondiffpatch-react

jsondiffpatch-react

library1.0.8jsnpmunverified

jsondiffpatch-react is a React component designed to visualize differences between two JavaScript objects or arrays, built upon the core `jsondiffpatch` library. The current stable version is 1.0.8, with recent minor updates indicating active maintenance rather than rapid feature development. It originated as a fork of the now-archived `jsondiffpatch-for-react` project. Its key differentiator is providing a readily available React component for rendering detailed, annotated JSON deltas in an HTML format, significantly simplifying the integration of JSON comparison UIs into React applications without needing to implement diff visualization from scratch. It offers configurable options such as showing or hiding unchanged values and enabling a custom `objectHash` function, which is particularly beneficial for optimizing array comparison, especially when dealing with lists of objects that may not have inherent stable unique identifiers.

web-framework serialization

npm install jsondiffpatch-react

github ↗package ↗

INSTALL

IMPORT

SIG · JSONDIFFPATCH-REAC

jsondiffpatch-react

web-frameworkjavascriptv1.0.8

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.

JsonDiffReact

✓ import JsonDiffReact from 'jsondiffpatch-react';

✗ const JsonDiffReact = require('jsondiffpatch-react');

The primary component is exported as a default export, intended for use in ES module environments within React applications.

This quickstart demonstrates how to use the `JsonDiffReact` component to display differences between two JavaScript objects, including examples of changed data with annotations, identical data with custom tips, and how to hide unchanged values for a more concise diff.

import React, { useState } from 'react'; import JsonDiffReact from 'jsondiffpatch-react'; const App = () => { const [leftData] = useState({ id: 1, name: 'Alice', age: 30, hobbies: ['reading', 'coding', { type: 'music', genre: 'classical' }], }); const [rightData] = useState({ id: 1, name: 'Alice', age: 31, hobbies: ['reading', 'gaming', { type: 'music', genre: 'jazz' }], status: 'active' }); const [identicalData] = useState({ id: 2, name: 'Bob', email: 'bob@example.com' }); return ( <div style={{ padding: '20px' }}> <h1>JSON Diff React Examples</h1> <h2>Changed Data with Annotations</h2> <p>Differences between two complex objects, showing annotations.</p> <JsonDiffReact left={leftData} right={rightData} show={true} annotated={true} tips="No differences detected." objectHash={(obj) => obj.id || obj.name || JSON.stringify(obj)} /> <h2>Identical Data (with custom tips)</h2> <p>When data is identical, a custom tip message is displayed.</p> <JsonDiffReact left={identicalData} right={identicalData} show={true} annotated={false} tips="The objects are exactly the same!" /> <h2>Hiding Unchanged Values</h2> <p>Only the differing parts are displayed, providing a more concise view.</p> <JsonDiffReact left={{ a: 1, b: 2, c: { d: 4 } }} right={{ a: 1, b: 3, c: { d: 4, e: 5 } }} show={false} annotated={false} /> </div> ); }; export default App;

Debug

Known issues

gotchaThe `objectHash` prop is crucial for accurate and performant array comparison when elements within arrays lack stable unique identifiers. Without it, `jsondiffpatch` might incorrectly identify moved or modified items as additions and deletions, leading to less precise diff results.

fix

Always provide a robust `objectHash` function that generates a unique and consistent key for each object in an array. This typically involves using an `id` property or a combination of stable properties, e.g., `(obj) => obj.id || obj._id || obj.name || JSON.stringify(obj)`.

affects: >=1.0.0

gotchaEnsure that `react` and `react-dom` peer dependencies are installed and compatible with the specified version ranges (`^16.8 || ^17 || ^18`). Mismatched or missing peer dependencies can lead to runtime errors, rendering issues, or unexpected behavior related to React's lifecycle and hooks.

fix

Verify your project's `package.json` for `react` and `react-dom` versions. Install or update them to a compatible version using `npm install react react-dom` or `yarn add react react-dom`.

affects: >=1.0.0

gotchaThe `show` prop controls the visibility of *unchanged* values in the JSON structure. Setting `show={false}` will hide parts of the JSON that are identical between the `left` and `right` objects, providing a concise 'diff-only' view. This behavior can be misunderstood if the expectation is to see the full structure with changes merely highlighted.

fix

Use `show={true}` if you want to display the entire merged JSON structure with differences highlighted. Use `show={false}` for a more compact view that focuses solely on the differing elements and their immediate context.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: React is not defined

The `React` object was not imported into the scope where JSX is being used.

fix

Add `import React from 'react';` at the top of your component file.

TypeError: Cannot read properties of undefined (reading 'map') OR TypeError: Cannot read properties of null (reading 'length')

The `left` or `right` props were not provided, or were `undefined`/`null`, leading to attempts to iterate or access properties on non-existent data within the component.

fix

Always ensure that both `left` and `right` props are provided with valid JSON-serializable data (objects, arrays, strings). If an 'empty' state is intended, provide an empty object `{}` or array `[]` rather than `undefined` or `null` for better component stability.

Incorrect diff output for arrays (e.g., items appear as deleted/added instead of modified)

When comparing arrays of objects, `jsondiffpatch` without an appropriate `objectHash` function may fail to correctly identify modified objects if they lack stable unique identifiers. It might treat them as entirely new objects being added and old ones being removed.

fix

Implement and pass an `objectHash` prop that provides a unique and consistent key for each object in your arrays. This helps `jsondiffpatch` track object identities across changes. For example: `<JsonDiffReact objectHash={(obj) => obj.id || JSON.stringify(obj)} />`.

Upgrade

Version history

1.0.8latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for rendering React components.

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

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/bluepeter/jsondiffpatch-react ↗

packagehttps://www.npmjs.com/package/jsondiffpatch-react ↗