json-diff-react

A [React.js] component that renders a structural diff of two JSON values. Written in TypeScript
except for the JavaScript code inherited from the original [json-diff] library.
Types are declared for all user facing functionality.

This is a fork of [json-diff] with all of the dependencies towards Node.js core modules removed.
Code from [json-diff] can be found under src/JsonDiff/Internal and it’s mostly unchanged — expect
for the colorize module which now returns a JSX element instead of a string.

See the interactive live demo.
Also see the source of that demo.

!A screenshot of the React component example

Also see https://relex.github.io/json-diff-react/ for other examples.

Simple example

Here is a simple example (see the full demo of this example):

`` typescript
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 .
const parsedA = JSON.parse(a)
const parsedB = JSON.parse(b);

return jsonA={parsedA}
jsonB={parsedB}
styleCustomization={{
additionLineStyle: { color: 'green' },
deletionLineStyle: { color: 'red' },
unchangedLineStyle: { color: 'gray' },
frameStyle: {
'font-family': 'monospace',
'white-space': 'pre',
'background': 'silver',
},
}}
/>;
} catch (e: any) {
return

Error: {e?.message ?? JSON.stringify(e)}

The requires 4 input properties:

1. jsonA (required): a JSON value
- The caller is responsible for providing a valid, parsed JSON value (e.g. via JSON.parse)
2. jsonB (required): a JSON value that is compared to jsonA
- The caller is responsible for providing a valid, parsed JSON value
3. styleCustomization (optional): CSS customization of the markup
4. jsonDiffOptions (optional): options that are fed directly to original [json-diff] code

N.B. The type of the input JSON values is described in TypeScript like this (you can import this
type from the library in case you need to use it for the values passed to the
):

` typescript
export type JsonValue =
| { [x: string]: JsonValue }
| Array
| string
| number
| boolean
| null;
`

$3

There are two ways to customize the look of the component:

1. via CSS styles
2. via styleCustomization property of

#### CSS

Add these CSS styles for the component and customize them:

` css
.deletion {
/ customization for deleted lines (