Add support for React 18

Author: bhch

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"
   }
 }

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;