react-json-difference

react-json-difference

Display json diffs in react. Based on jsondiffpatch and originally customized for React Query Rewind

Now as it's own module, this component can easily be installed into any react app:

Import the component at the top of your file:

import JsonDiff from 'jsondiff-react';

The JsonDiff1 component takes in 3 properties:

• oldJson: The old JSON object
• currentJson: The new version of the JSON object
• isHidden: Hides unchanged fields when true, shows all fields when false

    <JsonDiff
      oldJson={{
        a: 1,
        b: 2,
        c: 4,
        d: ["hello", "world"],
        nested: { e: 5, f: 6, h: ["goodbye", "world"], i: 8 },
      }}
      currentJson={{
        a: 1,
        b: 2,
        c: 3,
        d: ["hello", "everyone"],
        nested: { e: 5, f: 6, g: 7, h: ["goodbye", "everyone"] },
      }}
      isHidden={false} // set to true to hide unchanged fields, false to show all fields
    />

With isHidden = false:

With isHidden = true:

This component uses classnames and CSS for styling. If you run into any issues, take a look at the source code at https://github.com/johnwdunn20/react-jsondiff