examples/example-02.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <style>
      body {
        background: white;
        color: black;
      }
    </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 };

      function DiffOfJsons({ a, b }: { a: string, b: string }): JSX.Element {
        try {
          // JSON.parse() can throw an exception if parsing fails.
          // It’s for you to handle them before calling <JsonDiffComponent />.
          const parsedA = JSON.parse(a)
          const parsedB = JSON.parse(b);

          return <JsonDiffComponent
            jsonA={parsedA}
            jsonB={parsedB}
            styleCustomization={{
              additionLineStyle: { color: 'green' },
              deletionLineStyle: { color: 'red' },
              unchangedLineStyle: { color: 'gray' },
              frameStyle: {
                fontFamily: 'monospace',
                whiteSpace: 'pre',
                background: 'silver',
              },
            }}
          />;
        } catch (e) {
          return <p>Error: {e?.message ?? JSON.stringify(e)}</p>;
        }
      }

      const App = () => <div>
        <h1>JSON diff</h1>

        <p>An example from the README.md.</p>
        <DiffOfJsons a={JSON.stringify(a)} b={JSON.stringify(b)} />

        <p>Here is a render of a parsing error:</p>
        <DiffOfJsons a="invalid json" b="invalid json" />
      </div>;

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