json-diff-react/examples/example-03.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!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;
      }

      .custom-add {
        color: violet;
      }

      .custom-rm {
        color: lime;
      }

      .custom-unchanged {
        color: pink;
      }

      .custom-diff {
        font-family: monospace;
        white-space: pre;
        background: purple
      }
    </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>
          A demo that shows how you can omit the “class” attribute.
          There should be no coloring below.
          Also no styles at all, it should look like regular text.
        </p>
        <JsonDiffComponent
          jsonA={a}
          jsonB={b}
          styleCustomization={{
            additionClassName: null,
            deletionClassName: null,
            unchangedClassName: null,
            frameClassName: null,
          }}
        />

        <p>There should be normal coloring below.</p>
        <JsonDiffComponent jsonA={a} jsonB={b} />

        <p>There should be alternative coloring below (“class” names are customized).</p>
        <JsonDiffComponent
          jsonA={a}
          jsonB={b}
          styleCustomization={{
            additionClassName: "custom-add",
            deletionClassName: "custom-rm",
            unchangedClassName: "custom-unchanged",
            frameClassName: "custom-diff",
          }}
        />
      </div>;

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