From 119dab6eeb8cc06cf9350a27116d917903953892 Mon Sep 17 00:00:00 2001
From: Bharat Chauhan <tell.bhch@gmail.com>
Date: Sun, 7 Jan 2024 08:15:25 +0530
Subject: [PATCH] Add support for React 18

---
 package.json    |  4 ++--
 src/renderer.js | 43 +++++++++++++++++++++++++++++++++----------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 40799ee..f1d7ca0 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,8 @@
     "microbundle": "^0.15.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.2 || ^18",
+    "react-dom": "^17.0.2 || ^18",
     "react-modal": "^3.15.1"
   }
 }
diff --git a/src/renderer.js b/src/renderer.js
index 5914c32..2111ade 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -50,18 +50,16 @@ export function FormInstance(config) {
     this.onChange = this.onChange.bind(this);
 
     this.render = function() {
+        if (ReactDOM.hasOwnProperty('createRoot'))
+            this._renderReact18();
+        else 
+            this._renderReact17();
+    };
+
+    this._renderReact17 = function() {
         try {
             ReactDOM.render(
-                <FormContainer
-                    schema={this.schema}
-                    dataInputId={this.dataInputId}
-                    data={this.data}
-                    errorMap={this.errorMap}
-                    fileHandler={this.fileHandler}
-                    fileHandlerArgs={this.fileHandlerArgs}
-                    onChange={this.onChange}
-                    readonly={this.readonly}
-                />,
+                this._getFormContainerComponent(),
                 document.getElementById(this.containerId)
             );
         } catch (error) {
@@ -72,6 +70,31 @@ export function FormInstance(config) {
         }
     };
 
+    this._renderReact18 = function() {
+        const root = ReactDOM.createRoot(document.getElementById(this.containerId));
+
+        try {
+            root.render(this._getFormContainerComponent());
+        } catch (error) {
+            root.render(<ErrorReporter error={error} />);
+        }
+    };
+
+    this._getFormContainerComponent = function() {
+        return (
+            <FormContainer
+                schema={this.schema}
+                dataInputId={this.dataInputId}
+                data={this.data}
+                errorMap={this.errorMap}
+                fileHandler={this.fileHandler}
+                fileHandlerArgs={this.fileHandlerArgs}
+                onChange={this.onChange}
+                readonly={this.readonly}
+            />
+        );
+    };
+
     this.update = function(config) {
         this.schema = config.schema || this.schema;
         this.data = config.data || this.data;