Merge pull request #1 from johnwdunn20/john/react

Created a react component

packages/jsondiffpatch/package.json

@@ -49,12 +49,16 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.10",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "jest": "^29.7.0",
     "ncp": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "typescript": "~5.3.2"

packages/jsondiffpatch/src/formatters/react.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { diff } from '../index.js';
+import HTMLFormatter from './html.js';
+import type { Delta } from '../types.js';
+import './styles/html.css';
+
+type ReactFormatterType = {
+  oldJson: unknown;
+  newJson?: unknown;
+  initallyShowDiff? : boolean;
+}
+// write unit tests for this component
+
+const ReactFormatterComponent: React.FC<ReactFormatterType> = ({ oldJson, newJson, initallyShowDiff }) => {
+
+  const [showDiffOnly, setShowDiffOnly] = useState(initallyShowDiff)
+
+  const delta: Delta = diff(oldJson, newJson);
+  if (!delta) {
+    return <></>;
+  }
+  const htmlDiff = new HTMLFormatter().format(delta, oldJson);
+  const createMarkupHtml = () => ({ __html: htmlDiff } || '') as { __html: TrustedHTML };
+
+  return (
+    <div className={`json-diff-container ${showDiffOnly ? 'jsondiffpatch-unchanged-hidden' : ''}`}>
+        <div dangerouslySetInnerHTML={createMarkupHtml()}></div>
+  </div>
+  );
+};
+
+export default ReactFormatterComponent;

packages/jsondiffpatch/tsconfig.json

@@ -9,7 +9,8 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": false
+    "skipLibCheck": false,
+    "jsx": "react",
   },
   "include": ["src"]
 }