react-confirm 0.2.4 → 0.3.0-1

package/README.md

@@ -1,37 +1,38 @@
 # react-confirm
-Small library which makes your Dialog component callable.
+react-confirm is a lightweight library that simplifies the implementation of confirmation dialogs in React applications by offering a Promise-based API that works seamlessly with async/await syntax, similar to `window.confirm`.
 
-This library does not provide any view component. Just adds a functionality to be callable like `window.confirm`.
+One key feature of react-confirm is that it doesn't provide a specific view or component for the confirmation dialog, allowing you to easily customize the appearance of the dialog to match your application's design.
 
-In the [example](https://github.com/haradakunihiko/react-confirm/tree/master/example), [react-bootstrap](https://react-bootstrap.github.io/components.html#modals) and [material-ui](http://www.material-ui.com/#/components/dialog) are used with.
+In the [example](https://github.com/haradakunihiko/react-confirm/tree/master/example), [react-bootstrap](https://react-bootstrap-v3.netlify.app/components/modal/) and [material-ui](http://www.material-ui.com/#/components/dialog) are used with.
 
 [![npm version](https://badge.fury.io/js/react-confirm.svg)](https://badge.fury.io/js/react-confirm)
 
 ## Motivation
- React is great. And I respect the concept to render the view reactively only by it's state. However, it easily becomes really complex to manage all states which are only needed just temporarily like confirmation dialog. The question is... Is it worth to manage them inside your app? I guess the answer is not always yes.
+React is a powerful library that allows for reactive rendering based on component state. However, managing temporary states like confirmation dialogs can quickly become complex. The question is: is it worth implementing these states within your app? The answer is not always a clear yes.
 
 ## What you can do
- With this library,
- - You can open a dialog component by calling function and it will be rendered outside your application. The function returns promise so that you can define callbacks to handle the confirmation result.
- - You can pass arguments to the function and use them inside the dialog component.
- - You can get values from the component in the promise.
- - There is no limitation in the dialog. You can use input forms, multiple buttons, whatever you want (see demo site).
+react-confirm library offers several benefits:
+
+- You can open a dialog component by calling a function without appending it into your React tree. The function returns a promise, allowing you to handle confirmation results with callbacks.
+- You can pass arguments to the function and use them inside the dialog component.
+- You can retrieve values from the component in the promise.
+- The library provides flexibility in designing the dialog. There is no limitation in the type of components you can use, whether it be input forms or multiple buttons. You can even check out the demo site to see examples of how to customize the dialog.
 
 ## Demo
 https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1
 
 ## Versions
 
-- React 18+ users should use `react-confirm` version 0.2.x
+- React 18+ users should use `react-confirm` version 0.2.x or 0.3.x
 - React <=17 users should stick to `react-confirm` version 0.1.x
 
 ## Usage
-1. create your dialog component.
-2. apply `confirmable` to your component (optional, but usually recommended).
-3. create function with `createConfirmation` by passing your confirmable component.
-4. call it!
+1. Create your dialog component.
+2. Apply `confirmable` HOC to your component (Optional. See `confirmable` implementation).
+3. Create a function using `createConfirmation` by passing your `confirmable` component.
+4. Call it!
 
-### create confirmable component
+### Create your dialog component and Apply `confirmable` HOC to your component.
 
 ```js
 import React from 'react';
@@ -56,16 +57,9 @@ YourDialog.propTypes = {
 
 // confirmable HOC pass props `show`, `dismiss`, `cancel` and `proceed` to your component.
 export default confirmable(YourDialog);
-
-// or, use `confirmable` as decorator
-@confirmable
-class YourDialog extends React.Component {
-}
-
-
 ```
 
-### create confirm function
+### Create a function using `createConfirmation`
 ```js
 import { createConfirmation } from 'react-confirm';
 import YourDialog from './YourDialog';
@@ -77,10 +71,9 @@ export const confirm = createConfirmation(YourDialog);
 export function confirmWrapper(confirmation, options = {}) {
   return confirm({ confirmation, options });
 }
-
 ```
 
-### use it!
+### Call it!
 Now, you can show dialog just like window.confirm with async-await. The most common example is onclick handler for submit buttons.
  
 ```js
@@ -108,6 +101,45 @@ const handleOnClick2 = async () => {
 
 You can check more complex example in [codesandbox](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)
 
+## Using with Context
+By default, this library renders the confirmation dialog without appending the component to your app's React component tree. While this can be useful, it may cause issues if you need to consume context in your component. To overcome this problem, you can use the `MountPoint` component to include your confirmation dialog within your app's tree, enabling it to access context and other data from the app.
+
+Create your own `createConfirmation` using `createConfirmationCreater` and `createReactTreeMounter`.
+
+```js
+import { createConfirmationCreater, createReactTreeMounter, createMountPoint } from 'react-confirm';
+
+const mounter = createReactTreeMounter(); 
+
+export const createConfirmation = createConfirmationCreater(mounter);
+export const MountPoint = createMountPoint(mounter);
+```
+
+Put `MountPoint` into your React tree.
+```js
+const YourRootComponent = () => {
+  return (
+    <YourContext.Provider>
+      <MountPoint />
+      <YourApp />
+    </YourContext.Provider>
+  )
+}
+```
+
+use your `createConfirmation` as usual.
+```js
+export const confirm = createConfirmation(YourDialog);
+```
+
+To render the confirmation dialog within the React component tree but in a different part of the DOM, you can pass a DOM element to the `createReactTreeMounter` function. This will use the `createPortal` method to render the confirmation dialog in the specified DOM element while keeping it within the React component tree.
+
+```js
+const mounter = createReactTreeMounter(document.body); 
+```
+
+### example
+Context example with Chakra-ui in [codesandbox](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
 
 ## typescript
 

package/lib/createConfirmation.js

@@ -3,55 +3,54 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _client = require("react-dom/client");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var createConfirmation = function createConfirmation(Component) {
-  var unmountDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
-  var mountingNode = arguments.length > 2 ? arguments[2] : undefined;
-  return function (props) {
-    var wrapper = (mountingNode || document.body).appendChild(document.createElement('div'));
-    var root = (0, _client.createRoot)(wrapper);
-    var promise = new Promise(function (resolve, reject) {
-      try {
-        root.render( /*#__PURE__*/_react["default"].createElement(Component, _extends({
-          reject: reject,
-          resolve: resolve,
-          dispose: dispose
-        }, props)));
-      } catch (e) {
-        console.error(e);
-        throw e;
+exports["default"] = exports.createConfirmationCreater = void 0;
+
+var _domTree = require("./mounter/domTree");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var createConfirmationCreater = function createConfirmationCreater(mounter) {
+  return function (Component) {
+    var unmountDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+    var mountingNode = arguments.length > 2 ? arguments[2] : undefined;
+    return function (props) {
+      var mountId;
+      var promise = new Promise(function (resolve, reject) {
+        try {
+          mountId = mounter.mount(Component, _objectSpread({
+            reject: reject,
+            resolve: resolve,
+            dispose: dispose
+          }, props), mountingNode);
+        } catch (e) {
+          console.error(e);
+          throw e;
+        }
+      });
+
+      function dispose() {
+        setTimeout(function () {
+          mounter.unmount(mountId);
+        }, unmountDelay);
       }
-    });
 
-    function dispose() {
-      setTimeout(function () {
-        root.unmount();
-        setTimeout(function () {
-          if (wrapper && wrapper.parentNode) {
-            wrapper.parentNode.removeChild(wrapper);
-          }
-        });
-      }, unmountDelay);
-    }
-
-    return promise.then(function (result) {
-      dispose();
-      return result;
-    }, function (result) {
-      dispose();
-      return Promise.reject(result);
-    });
+      return promise.then(function (result) {
+        dispose();
+        return result;
+      }, function (result) {
+        dispose();
+        return Promise.reject(result);
+      });
+    };
   };
 };
 
-var _default = createConfirmation;
+exports.createConfirmationCreater = createConfirmationCreater;
+
+var _default = createConfirmationCreater((0, _domTree.createDomTreeMounter)());
+
 exports["default"] = _default;

package/lib/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,9 +17,41 @@ Object.defineProperty(exports, "createConfirmation", {
     return _createConfirmation["default"];
   }
 });
+Object.defineProperty(exports, "createConfirmationCreater", {
+  enumerable: true,
+  get: function get() {
+    return _createConfirmation.createConfirmationCreater;
+  }
+});
+Object.defineProperty(exports, "createDomTreeMounter", {
+  enumerable: true,
+  get: function get() {
+    return _domTree.createDomTreeMounter;
+  }
+});
+Object.defineProperty(exports, "createMountPoint", {
+  enumerable: true,
+  get: function get() {
+    return _reactTree.createMountPoint;
+  }
+});
+Object.defineProperty(exports, "createReactTreeMounter", {
+  enumerable: true,
+  get: function get() {
+    return _reactTree.createReactTreeMounter;
+  }
+});
 
 var _confirmable = _interopRequireDefault(require("./confirmable"));
 
-var _createConfirmation = _interopRequireDefault(require("./createConfirmation"));
+var _createConfirmation = _interopRequireWildcard(require("./createConfirmation"));
+
+var _domTree = require("./mounter/domTree");
+
+var _reactTree = require("./mounter/reactTree");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/mounter/domTree.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDomTreeMounter = createDomTreeMounter;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _client = require("react-dom/client");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function createDomTreeMounter(defaultMountNode) {
+  var confirms = {};
+  var callbacks = {};
+
+  function mount(Component, props, mountNode) {
+    var key = Math.floor(Math.random() * (1 << 30)).toString(16);
+    var wrapper = (mountNode || defaultMountNode || document.body).appendChild(document.createElement('div'));
+    confirms[key] = wrapper;
+    var root = (0, _client.createRoot)(wrapper);
+    root.render( /*#__PURE__*/_react["default"].createElement(Component, props));
+    callbacks.mounted && callbacks.mounted();
+    return key;
+  }
+
+  function unmount(key) {
+    var wrapper = confirms[key];
+    delete confirms[key];
+
+    if (wrapper && wrapper.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
+  }
+
+  return {
+    mount: mount,
+    unmount: unmount,
+    options: {}
+  };
+}

package/lib/mounter/reactTree.js

@@ -0,0 +1,100 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMountPoint = createMountPoint;
+exports.createReactTreeMounter = createReactTreeMounter;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function createReactTreeMounter(mountNode) {
+  var confirms = {};
+  var callbacks = {};
+
+  function mount(Component, props) {
+    var key = Math.floor(Math.random() * (1 << 30)).toString(16);
+    confirms[key] = {
+      Component: Component,
+      props: props
+    };
+    callbacks.mounted && callbacks.mounted(confirms);
+    return key;
+  }
+
+  function unmount(key) {
+    delete confirms[key];
+    callbacks.mounted && callbacks.mounted(confirms);
+  }
+
+  function setMountedCallback(func) {
+    callbacks.mounted = func;
+  }
+
+  return {
+    mount: mount,
+    unmount: unmount,
+    options: {
+      setMountedCallback: setMountedCallback,
+      mountNode: mountNode
+    }
+  };
+}
+
+function createMountPoint(reactTreeMounter) {
+  return function () {
+    var _useState = (0, _react.useState)({}),
+        _useState2 = _slicedToArray(_useState, 2),
+        confirmComponents = _useState2[0],
+        setConfirmComponents = _useState2[1];
+
+    (0, _react.useEffect)(function () {
+      return reactTreeMounter.options.setMountedCallback(function (components) {
+        setConfirmComponents(_objectSpread({}, components));
+      });
+    }, []);
+
+    var element = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, Object.keys(confirmComponents).map(function (key) {
+      var _confirmComponents$ke = confirmComponents[key],
+          Component = _confirmComponents$ke.Component,
+          props = _confirmComponents$ke.props;
+      return /*#__PURE__*/_react["default"].createElement(Component, _extends({
+        key: key
+      }, props));
+    }));
+
+    if (reactTreeMounter.options.mountNode) {
+      element = /*#__PURE__*/(0, _reactDom.createPortal)(element, reactTreeMounter.options.mountNode);
+    }
+
+    return element;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm",
-  "version": "0.2.4",
+  "version": "0.3.0-1",
   "description": "Small library which makes your Dialog component callable",
   "main": "lib/index.js",
   "repository": {

package/src/createConfirmation.js

@@ -1,21 +1,11 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
+import { createDomTreeMounter } from './mounter/domTree';
 
-const createConfirmation = (Component, unmountDelay = 1000, mountingNode) => {
+export const createConfirmationCreater = (mounter) =>  (Component, unmountDelay = 1000, mountingNode) => {
   return (props) => {
-    const wrapper = (mountingNode || document.body).appendChild(document.createElement('div'));
-    const root = createRoot(wrapper);
-
+    let mountId;
     const promise = new Promise((resolve, reject) => {
       try {
-        root.render(
-          <Component
-            reject={reject}
-            resolve={resolve}
-            dispose={dispose}
-            {...props}
-          />
-        );
+        mountId = mounter.mount(Component, { reject, resolve, dispose, ...props}, mountingNode)
       } catch (e) {
         console.error(e);
         throw e;
@@ -24,12 +14,7 @@ const createConfirmation = (Component, unmountDelay = 1000, mountingNode) => {
 
     function dispose() {
       setTimeout(() => {
-        root.unmount();
-        setTimeout(() => {
-          if (wrapper && wrapper.parentNode) {
-            wrapper.parentNode.removeChild(wrapper);
-          }
-        });
+        mounter.unmount(mountId);
       }, unmountDelay);
     }
 
@@ -43,4 +28,4 @@ const createConfirmation = (Component, unmountDelay = 1000, mountingNode) => {
   }
 }
 
-export default createConfirmation;
+export default createConfirmationCreater(createDomTreeMounter());

package/src/index.js

@@ -1,4 +1,6 @@
 import confirmable from './confirmable';
-import createConfirmation from './createConfirmation';
+import createConfirmation, { createConfirmationCreater } from './createConfirmation';
+import { createDomTreeMounter } from './mounter/domTree';
+import { createReactTreeMounter, createMountPoint } from './mounter/reactTree';
 
-export { confirmable, createConfirmation };
+export { confirmable, createConfirmation, createConfirmationCreater, createDomTreeMounter, createReactTreeMounter, createMountPoint };

package/src/mounter/domTree.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+export function createDomTreeMounter(defaultMountNode) {
+    const confirms = {};
+    const callbacks = {};
+
+    function mount(Component, props, mountNode){
+        const key = Math.floor(Math.random() * (1 << 30)).toString(16);
+        const wrapper = (mountNode || defaultMountNode || document.body).appendChild(document.createElement('div'));
+        confirms[key] = wrapper;
+
+        const root = createRoot(wrapper);
+        
+        root.render(
+            <Component
+              {...props}
+            />
+          );
+        callbacks.mounted && callbacks.mounted();
+        return key;
+    }
+
+    function unmount(key) {
+        const wrapper = confirms[key];
+        delete confirms[key];
+        
+        if (wrapper && wrapper.parentNode) {
+            wrapper.parentNode.removeChild(wrapper);
+        }
+    }
+    return {
+        mount, unmount, options: {}
+    }
+}

package/src/mounter/reactTree.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom';
+
+export function createReactTreeMounter(mountNode) {
+    const confirms = {};
+    const callbacks = {};
+
+    function mount(Component, props){
+        const key = Math.floor(Math.random() * (1 << 30)).toString(16);
+        confirms[key] = { Component, props};
+        callbacks.mounted && callbacks.mounted(confirms);
+        return key;
+    }
+    function unmount(key) {
+        delete confirms[key];
+        callbacks.mounted && callbacks.mounted(confirms);
+    }
+
+    function setMountedCallback(func) {
+        callbacks.mounted = func;
+    }
+
+    return {
+        mount, unmount,
+        options: {
+            setMountedCallback, mountNode
+        }
+    }
+}
+
+export function createMountPoint(reactTreeMounter) {
+    return () => {
+        const [confirmComponents, setConfirmComponents] = useState({});
+
+        useEffect(() => {
+            return reactTreeMounter.options.setMountedCallback((components) => {
+                setConfirmComponents({...components});
+            });
+         }, []);
+
+         let element = (
+            <>
+                {Object.keys(confirmComponents).map((key) => {
+                    const { Component, props } = confirmComponents[key];
+                    return <Component key={key} {...props} />
+                })}
+            </>
+         )
+         if (reactTreeMounter.options.mountNode) {
+            element = createPortal(element, reactTreeMounter.options.mountNode);
+         }
+
+         return element;
+    }
+}