react-json-view-compare

React json compare view plugin, supports expansion and hiding.use react hooks.


Keywords
array-viewer, base-16, component, interactive, interactive-json, json, json-component, json-display, json-tree, json-view, json-viewer, json-inspector, json-compare, compare, version-compare, version, react, react-component, react-json, theme, tree, tree-view, treeview
License
MIT
Install
npm install react-json-view-compare@1.0.0

Documentation

react-json-view-compare

React json compare view plugin, supports expansion and hiding. Uses react hooks.

live demo

GitHub license

Links

Install

npm install --save react-json-view-compare

Usage

import ReactJsonViewCompare from 'react-json-view-compare';

const oldData = {
  name: 'super',
  age: 18,
  task: [
    { name: 'eat', time: '09:00' },
    { name: 'work', time: '10:00' },
    { name: 'sleep', time: '22:00' }
  ]
};
const newData = {
  name: 'coolapt',
  age: 20,
  task: [
    { name: 'eat', time: '09:00' },
    { name: 'work', time: '10:00' },
    { name: 'sleep', time: '23:00' },
    { name: 'running', time: '08:00' }
  ]
};
function App() {
  return <ReactJsonViewCompare oldData={oldData} newData={newData} />;
}
ReactDOM.render(<App />, document.getElementById('root'));

Example

示例1

Props

Attribute Type Default
oldData any no
newData any no

Events

not yet...

PS

如果喜欢请给个星星,谢谢。 If you like, please give me a star, thank you.

如果需要帮助: QQ:1573815240 邮箱: 1573815240@qq.com if you need help: QQ:1573815240 email: 1573815240@qq.com