Package Exports

diff-viz
diff-viz/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (diff-viz) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

diff-viz

render JSON differences + custom your styles

Install

npm install diff-viz

Demo

https://littlewhite-hai.github.io/diff-viz/

demo

Usage

import DiffViz from "diff-viz";

// describe the content to be rendered
const vizItems = [
    {
      path: "name",
      label: "name",
    },
    {
      path: "age",
      label: "age",
    },
    {
      path: "address",
      label: "address",
      content: (v) => {
        return v.city + " of " + v.country;
      },
    },
  ]

// diff data1 and data2 ,then render
<DiffViz
  data1={{
    name: "John",
    age: 30,
    address: {
      city: "New York",
      country: "USA",
    },
  }}
  data2={{
    name: "John",
    age: 31,
    address: {
      city: "New York",
      country: "USA",
    },
  }}
  vizItems={vizItems}
/>;

recommend to read the demo site: https://littlewhite-hai.github.io/diff-viz/

Dependencies

react (peer dependency)
react-dom (peer dependency)
lodash (peer dependency)

License

MIT