react-json-differ v1.0.5
React-json-differ
This package is based on deep-object-diff to display differences between two json objects in a similar fashion to : angular-object-diff
Usage
In a react project
npm i react-json-differ
import component
import { JsonDifferComponent } from 'react-json-differ'
usage
<JsonDifferComponent object1={object1ToCompare} object2={object2ToCompare}/>
css
If you want to use the default style for this component :
import "react-json-differ/dist/style.css";
Otherwise, these are all the class used that you can override:
.reactJsonDiffer__deleted
.reactJsonDiffer__updated
.reactJsonDiffer__added
.reactJsonDiffer__container
.reactJsonDiffer__level
Examples
First object:
{prop1: 1, prop2: 2, table:[1,2,3,4]}
Second object:
{prop1: 3, prop3: 4, table:[1,2,5,3]}
First object:
{
clients: [
{name: "Thor", commands:"Thunder", locations:["Asgärd", "Earth"]},
{name: "Odin", locations:["Asgärd"]}
]
}
Second object:
{
clients: [
{name: "Thor", commands:["Thunder", "clouds"], locations:["Earth", "Yggdrasil"]},
{name: "Odin", locations:["Asgärd"]},
{name: "Loki"}
]
};
Caveats and a few more details :
This is not a perfect packages notably when showing differences on update: as you can see on the previous example, we replaced commands:"Thunder"
with commands:["Thunder", "clouds"]
and the difference shown doesn't show this easily at first glance.
Same thing could be said for the previous list example, we inserted a '5' before the '3' and removed the '4', but it shows as if we replaced 3 by 5 and 4 by 3
It is meant to have a quick glance at two massive json objects and see where the paths diverged. More analysis will be needed for details.