@reach/portal - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

es/index.js

@@ -11,3 +11,3 @@ import React from "react";
     getRefs: function getRefs() {
-      return { node: null };
+      return { mountNode: null, portalNode: null };
     },
@@ -18,15 +18,25 @@ didMount: function didMount(_ref2) {
 
-      refs.node = document.createElement(type);
-      document.body.appendChild(refs.node);
+      // It's possible that the content we are portal has, itself, been portaled.
+      // In that case, it's important to append to the correct document element.
+      var ownerDocument = refs.mountNode.ownerDocument;
+      refs.portalNode = ownerDocument.createElement(type);
+      ownerDocument.body.appendChild(refs.portalNode);
       forceUpdate();
     },
     willUnmount: function willUnmount(_ref3) {
-      var node = _ref3.refs.node;
+      var portalNode = _ref3.refs.portalNode;
 
-      document.body.removeChild(node);
+      portalNode.ownerDocument.body.removeChild(portalNode);
     },
     render: function render(_ref4) {
-      var node = _ref4.refs.node;
+      var refs = _ref4.refs;
+      var portalNode = refs.portalNode;
 
-      return node ? createPortal(children, node) : null;
+      if (!portalNode) {
+        return React.createElement("div", { ref: function ref(div) {
+            return refs.mountNode = div;
+          } });
+      } else {
+        return createPortal(children, portalNode);
+      }
     }
@@ -33,0 +43,0 @@ });

index.js

@@ -23,3 +23,3 @@ "use strict";
     getRefs: function getRefs() {
-      return { node: null };
+      return { mountNode: null, portalNode: null };
     },
@@ -30,15 +30,25 @@ didMount: function didMount(_ref2) {
 
-      refs.node = document.createElement(type);
-      document.body.appendChild(refs.node);
+      // It's possible that the content we are portal has, itself, been portaled.
+      // In that case, it's important to append to the correct document element.
+      var ownerDocument = refs.mountNode.ownerDocument;
+      refs.portalNode = ownerDocument.createElement(type);
+      ownerDocument.body.appendChild(refs.portalNode);
       forceUpdate();
     },
     willUnmount: function willUnmount(_ref3) {
-      var node = _ref3.refs.node;
+      var portalNode = _ref3.refs.portalNode;
 
-      document.body.removeChild(node);
+      portalNode.ownerDocument.body.removeChild(portalNode);
     },
     render: function render(_ref4) {
-      var node = _ref4.refs.node;
+      var refs = _ref4.refs;
+      var portalNode = refs.portalNode;
 
-      return node ? (0, _reactDom.createPortal)(children, node) : null;
+      if (!portalNode) {
+        return _react2.default.createElement("div", { ref: function ref(div) {
+            return refs.mountNode = div;
+          } });
+      } else {
+        return (0, _reactDom.createPortal)(children, portalNode);
+      }
     }
@@ -45,0 +55,0 @@ });

package.json

 {
   "name": "@reach/portal",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Declarative portals for React",
@@ -5,0 +5,0 @@ "main": "index.js",

src/index.js

@@ -7,13 +7,21 @@ import React from "react";
   <Component
-    getRefs={() => ({ node: null })}
+    getRefs={() => ({ mountNode: null, portalNode: null })}
     didMount={({ refs, forceUpdate }) => {
-      refs.node = document.createElement(type);
-      document.body.appendChild(refs.node);
+      // It's possible that the content we are portal has, itself, been portaled.
+      // In that case, it's important to append to the correct document element.
+      const ownerDocument = refs.mountNode.ownerDocument;
+      refs.portalNode = ownerDocument.createElement(type);
+      ownerDocument.body.appendChild(refs.portalNode);
       forceUpdate();
     }}
-    willUnmount={({ refs: { node } }) => {
-      document.body.removeChild(node);
+    willUnmount={({ refs: { portalNode } }) => {
+      portalNode.ownerDocument.body.removeChild(portalNode);
     }}
-    render={({ refs: { node } }) => {
-      return node ? createPortal(children, node) : null;
+    render={({ refs }) => {
+      const { portalNode } = refs;
+      if (!portalNode) {
+        return <div ref={div => (refs.mountNode = div)} />;
+      } else {
+        return createPortal(children, portalNode);
+      }
     }}
@@ -20,0 +28,0 @@ />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4801

increased by42.55%

Lines of code

109

increased by34.57%

No dependency changes