Introduce renderReactRoot utility

Summary: This is a small utility to be able to render a react element without giving it a position somewhere in the react render tree, so that dialogs can be triggered and rendered imperatively for example.

Reviewed By: cekkaewnumchai

Differential Revision: D24021752

fbshipit-source-id: 84633624c63c72a38a1b277207efba75af358a03

desktop/app/src/utils/renderReactRoot.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {render, unmountComponentAtNode} from 'react-dom';
+
+/**
+ * This utility creates a fresh react render hook, which is great to render elements imperatively, like opening dialogs.
+ * Make sure to call `unmount` to cleanup after the rendering becomes irrelevant
+ */
+export function renderReactRoot(
+  handler: (unmount: () => void) => React.ReactElement,
+): void {
+  const div = document.body.appendChild(document.createElement('div'));
+  render(
+    handler(() => {
+      unmountComponentAtNode(div);
+      div.remove();
+    }),
+    div,
+  );
+}