https://github.com/bluepeter/jsondiffpatch-react

Diff & patch JavaScript objects... in React
https://github.com/bluepeter/jsondiffpatch-react

diffmatchpatch react reactjs

Last synced: about 1 month ago
JSON representation

Diff & patch JavaScript objects... in React

• Host: GitHub
• URL: https://github.com/bluepeter/jsondiffpatch-react
• Owner: bluepeter
• License: other
• Created: 2021-06-09T15:40:13.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T13:35:58.000Z (over 1 year ago)
• Last Synced: 2024-10-27T23:59:07.256Z (about 2 months ago)
• Topics: diffmatchpatch, react, reactjs
• Language: JavaScript
• Homepage:
• Size: 147 KB
• Stars: 10
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - jsondiffpatch-react - JSON diffing. (Miscellaneous / Miscellaneous)
• awesome-react-components - jsondiffpatch-react - JSON diffing. (Miscellaneous / Miscellaneous)
• fucking-awesome-react-components - jsondiffpatch-react - JSON diffing. (Miscellaneous / Miscellaneous)

README

        
# jsondiffpatch-react

- Originally forked from archived

  https://github.com/hero-guo/jsondiffpatch-for-react

- Based on https://github.com/benjamine/jsondiffpatch

# 1. install

    npm install jsondiffpatch-react

# 2. usage

```jsx

import React from 'react';

import JsonDiffReact from 'jsondiffpatch-react';

```

# 3. component props

- `left` (array, object, string)

- `right` (array, object, string)

- `show` (bool)

  you can show/hide unchanged values

- `annotated` (bool)

  This will render the original JSON delta in html, with annotations aside

  explaining the meaning of each part. This attempts to make the JSON delta

  format self-explained.

- `tips` (any)

  Displayed in case both elements are identical.

- `objectHash` (function)

  Will be passed to _jsondiffpatch_ to improve array comparison performance, as

  described

  [here](https://github.com/benjamine/jsondiffpatch/blob/master/docs/arrays.md#an-example-using-objecthash).

  Example:

  ```jsx

  

      obj.id || obj._id || obj.name || JSON.stringify(obj)

    }

  />

  ```

# Development notes

To publish to NPM, change the version number in `package.json` and `npm publish`

once complete. Then, go to Github Releases and follow the instructions to

publish a new version there too.