json-diff-react/examples/example-04.html at main · relex/json-diff-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <style>
      body {
        background: white;
        color: black;
      }

      .deletion {
        color: red;
      }

      .addition {
        color: green;
      }

      .unchanged {
        color: gray;
      }

      .diff {
        font-family: monospace;
        white-space: pre;
        border: 1px solid gray;
        padding: 10px;
      }

      .diff + .diff {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="./json-diff-react.bundle.js"></script>

    <script type="text/babel">
      const { JsonDiffComponent } = window['json-diff-react'];

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);

      const a = { foo: 123, bar: 456, baz: 789 };
      const b = { foo: 123, test: 'hello', baz: 789 };

      const App = () => <div>
        <h1>JSON diff</h1>
        <p>An example that shows the library can work with any JSON input, not only objects.</p>
        <JsonDiffComponent jsonA={null} jsonB={null} />
        <JsonDiffComponent jsonA={123} jsonB={null} />
        <JsonDiffComponent jsonA={null} jsonB={123} />
        <JsonDiffComponent jsonA={true} jsonB="test" />
        <JsonDiffComponent jsonA={true} jsonB={null} />
      </div>;

      root.render(<App/>);
    </script>
  </body>
</html>