{"id":18339798,"url":"https://github.com/relex/json-diff-react","last_synced_at":"2025-04-06T05:32:18.317Z","repository":{"id":142394149,"uuid":"613343326","full_name":"relex/json-diff-react","owner":"relex","description":"A React.js component that renders a structural diff of two JSON values","archived":false,"fork":false,"pushed_at":"2023-03-20T10:37:36.000Z","size":1819,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-26T14:03:39.924Z","etag":null,"topics":["diff","javascript-library","json","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://relex.github.io/json-diff-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/relex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-13T11:45:53.000Z","updated_at":"2024-03-09T11:15:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"87c9f5a4-3caf-4028-830c-8564ed610896","html_url":"https://github.com/relex/json-diff-react","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/relex%2Fjson-diff-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/relex%2Fjson-diff-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/relex%2Fjson-diff-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/relex%2Fjson-diff-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/relex","download_url":"https://codeload.github.com/relex/json-diff-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247440596,"owners_count":20939223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diff","javascript-library","json","reactjs","typescript"],"created_at":"2024-11-05T20:19:25.620Z","updated_at":"2025-04-06T05:32:18.306Z","avatar_url":"https://github.com/relex.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# json-diff-react\n\nA [React.js] component that renders a structural diff of two JSON values. Written in TypeScript\nexcept for the JavaScript code inherited from the original [json-diff] library.\nTypes are declared for all user facing functionality.\n\nThis is a fork of [json-diff] with all of the dependencies towards Node.js core modules removed.\nCode from [json-diff] can be found under `src/JsonDiff/Internal` and it’s mostly unchanged — expect\nfor the `colorize` module which now returns a JSX element instead of a string.\n\nSee the [interactive live demo](https://relex.github.io/json-diff-react/examples/example-07.html).\nAlso see the [source of that demo](examples/example-07.html).\n\n![A screenshot of the React component example](https://relex.github.io/json-diff-react/pictures/screenshot.png)\n\nAlso see https://relex.github.io/json-diff-react/ for other examples.\n\n## Simple example\n\nHere is a simple example ([see the full demo of this example](examples/example-02.html)):\n\n``` typescript\nfunction DiffOfJsons({ a, b }: { a: string, b: string }): JSX.Element {\n  try {\n    // JSON.parse() can throw an exception if parsing fails.\n    // It’s for you to handle them before calling \u003cJsonDiffComponent /\u003e.\n    const parsedA = JSON.parse(a)\n    const parsedB = JSON.parse(b);\n\n    return \u003cJsonDiffComponent\n      jsonA={parsedA}\n      jsonB={parsedB}\n      styleCustomization={{\n        additionLineStyle: { color: 'green' },\n        deletionLineStyle: { color: 'red' },\n        unchangedLineStyle: { color: 'gray' },\n        frameStyle: {\n          'font-family': 'monospace',\n          'white-space': 'pre',\n          'background': 'silver',\n        },\n      }}\n    /\u003e;\n  } catch (e: any) {\n    return \u003cp\u003eError: {e?.message ?? JSON.stringify(e)}\u003c/p\u003e;\n  }\n}\n```\n\nLook into the [examples](examples) directory to find more examples on how to use this component.\n\n## Usage\n\nThe `\u003cJsonDiffComponent /\u003e` requires 4 input properties:\n\n1. `jsonA` **(required)**: a JSON value\n   - The caller is responsible for providing a valid, parsed JSON value (e.g. via `JSON.parse`)\n2. `jsonB` **(required)**: a JSON value that is compared to `jsonA`\n   - The caller is responsible for providing a valid, parsed JSON value\n3. `styleCustomization` *(optional)*: CSS customization of the markup\n4. `jsonDiffOptions` *(optional)*: options that are fed directly to original [json-diff] code\n\nN.B. The type of the input JSON values is described in TypeScript like this (you can import this\ntype from the library in case you need to use it for the values passed to the\n`\u003cJsonDiffComponent /\u003e`):\n\n``` typescript\nexport type JsonValue =\n  | { [x: string]: JsonValue }\n  | Array\u003cJsonValue\u003e\n  | string\n  | number\n  | boolean\n  | null;\n```\n\n### Style customization\n\nThere are two ways to customize the look of the component:\n\n1. via CSS styles\n2. via `styleCustomization` property of `\u003cJsonDiffComponent /\u003e`\n\n#### CSS\n\nAdd these CSS styles for the component and customize them:\n\n``` css\n.deletion {\n  /* customization for deleted lines (\u003cdiv\u003e) */\n  color: red;\n}\n\n.addition {\n  /* customization for added lines (\u003cdiv\u003e) */\n  color: green;\n}\n\n.unchanged {\n  /* customization for unchanged lines (\u003cdiv\u003e) */\n  color: gray;\n}\n\n.diff {\n  /* customization for the top-level \u003cdiv\u003e wrapper that contains the diff */\n  font-family: monospace;\n  white-space: pre;\n}\n```\n\nThe names of the classes can be customized via `styleCustomization` React property.\n\n#### styleCustomization\n\nYou can also use the `styleCustomization` property to customize how the\ncomponent looks and rename the CSS classes.\n\n``` typescript\nexport type StyleCustomization = {\n  additionLineStyle: CSS.Properties | null;\n  additionClassName: string | null | undefined;\n  deletionLineStyle: CSS.Properties | null;\n  deletionClassName: string | null | undefined;\n  unchangedLineStyle: CSS.Properties | null;\n  unchangedClassName: string | null | undefined;\n  frameStyle: CSS.Properties | null;\n  frameClassName: string | null | undefined;\n};\n```\n\nExplanation of each customization option:\n\n* `additionLineStyle`: `style` attribute of the HTML `\u003cdiv\u003e` element that is\n  used to render added lines in the diff\n  * Defaults to `null` if not specified (means there will be no `style` added)\n* `additionClassName`: `className` attribute of the HTML `\u003cdiv\u003e` element that\n  is used to render added lines in the diff\n  * Defaults to `addition` if not specified\n  * Set to `null` to remove the `class` attribute\n* `deletionLineStyle`: `style` attribute of the HTML `\u003cdiv\u003e` element that is\n  used to render deleted lines in the diff\n  * Defaults to `null` if not specified (means there will be no `style` added)\n* `deletionClassName`: `className` attribute of the HTML `\u003cdiv\u003e` element that\n  is used to render deleted lines in the diff\n  * Defaults to `deletion` if not specified\n  * Set to `null` to remove the `class` attribute\n* `unchangedLineStyle`: `style` attribute of the HTML `\u003cdiv\u003e` element that is\n  used to render unchanged lines in the diff\n  * Defaults to `null` if not specified (means there will be no `style` added)\n* `unchangedClassName`: `className` attribute of the HTML `\u003cdiv\u003e` element that\n  is used to render unchanged lines in the diff\n  * Defaults to `unchanged` if not specified\n  * Set to `null` to remove the `class` attribute\n* `frameStyle`: `style` attribute of the HTML `\u003cdiv\u003e` element that contains the\n  whole rendered diff, i.e. the top level `\u003cdiv\u003e`\n  * Can be used to customize background, etc.\n  * Defaults to `null` if not specified (means there will be no `style` added)\n* `frameClassName`: `className` attribute of the HTML `\u003cdiv\u003e` element that\n  contains the whole rendered diff, i.e. the top level `\u003cdiv\u003e`\n  * Defaults to `diff`\n  * Set to `null` to remove the `class` attribute\n\n\n### Options fed to json-diff\n\nYou can pass options to the underlying [json-diff] functions via\n`jsonDiffOptions` which has the following type:\n\n``` typescript\nexport interface DiffOptions {\n  verbose?: boolean;\n  raw?: boolean;\n  keysOnly?: boolean;\n  full?: boolean;\n  sort?: boolean;\n  outputKeys?: string[];\n  keepUnchangedValues?: boolean;\n  outputNewOnly?: boolean;\n  maxElisions?: number;\n  precision?: number;\n  excludeKeys?: string[];\n  showElisionsForObjects?: boolean;\n  renderElision?: (elisionCount: number, maxElisions: number) =\u003e string | string[];\n}\n```\n\nAll of the fields are optional. Consult the original [json-diff] library to\nlearn more about how the options impact the output.\n\nMost of the `DiffOptions` type came from\nhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/json-diff/index.d.ts.\n\nN.B. I added the `excludeKeys` attribute to the `DiffOptions` imported from\n`DefinitelyTyped`. It appears like the type definitions in `DefinitelyTyped`\nare outdated.\n\nN.B. `showElisionsForObjects` option was not part of the original [json-diff] library.\nIt was added only for this library. It’s turned on by default.\nIt renders elisions like `...` for objects in the similar way it’s done for arrays.\n\nN.B. `renderElision` option was added only to this library.\nIt wasn’t a part of original [json-diff] library.\nIt allows you to customize “...”/“... (N entries)” template.\nCan also be useful to support localizations other than English.\n\n## Authors\n\nThanks to Andrey Tarantsov for the work he did on the original [json-diff] package.\nThis package is just a thin wrapper on top of it.\n\nThanks to Viacheslav Lotsmanov for providing code review and change suggestions.\n\nThis package was built at [RELEX](https://www.relexsolutions.com/).\n\nMain developer: [Joonas Laukka](https://github.com/skyvier).\n\n## License\n\nThis software is distributed under the MIT license.\nFor details, have a look at [LICENSE-MIT](LICENSE-MIT).\n\n[json-diff]: https://github.com/andreyvit/json-diff\n[React.js]: https://reactjs.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frelex%2Fjson-diff-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frelex%2Fjson-diff-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frelex%2Fjson-diff-react/lists"}