react-diff-viz

react-diff-viz is a React component that compares and renders complex object differences

Install

npm install react-diff-viz

Usage

import Diff from "react-diff-viz";

// diff data1 and data2 ,then render
<Diff
  data1={{
    name: "John",
    age: 30,
    address: {
      city: "New York",
      country: "USA",
    },
  }}
  data2={{
    name: "John",
    age: 31,
    address: {
      city: "New York",
      country: "USA",
    },
  }}
  vizItems={[
    {
      path: "name",
      label: "name",
    },
    {
      path: "age",
      label: "age",
    },
    {
      path: "address",
      label: "address",
      content: (v) => {
        return v.city + " of " + v.country;
      },
    },
  ]}
/>;

Features

This component integrates diff algorithm and visual rendering, features are as follows

• The left and right columns display the data, aligned to the height of corresponding field, and colored the different fields
• The component comes with the diff function. You can customize the diff function for fields
• The component has its own rendering function. You can customize rendering functions for fields
• Supports comparison of nested objects and arrays

Dependencies

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

Demo

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

API

Diff Component API

VizItems API

License

MIT