Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@reach/portal

Package Overview
Dependencies
Maintainers
3
Versions
53
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/portal - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

55

es/index.js

@@ -1,4 +0,3 @@

import React from "react";
import React, { useLayoutEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import Component from "@reach/component-component";

@@ -9,37 +8,21 @@ function Portal(_ref) {

type = _ref$type === void 0 ? "reach-portal" : _ref$type;
return React.createElement(Component, {
getRefs: function getRefs() {
return {
mountNode: null,
portalNode: null
};
},
didMount: function didMount(_ref2) {
var refs = _ref2.refs,
forceUpdate = _ref2.forceUpdate;
// 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 portalNode = _ref3.refs.portalNode;
portalNode.ownerDocument.body.removeChild(portalNode);
},
render: function render(_ref4) {
var refs = _ref4.refs;
var portalNode = refs.portalNode;
var mountNode = useRef(null);
var portalNode = useRef(null);
if (!portalNode) {
return React.createElement("div", {
ref: function ref(div) {
return refs.mountNode = div;
}
});
} else {
return createPortal(children, portalNode);
}
}
var _useState = useState(),
forceUpdate = _useState[1];
useLayoutEffect(function () {
// 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 = mountNode.current.ownerDocument;
portalNode.current = ownerDocument.createElement(type);
ownerDocument.body.appendChild(portalNode.current);
forceUpdate({});
return function () {
portalNode.current.ownerDocument.body.removeChild(portalNode.current);
};
}, [type]);
return portalNode.current ? createPortal(children, portalNode.current) : React.createElement("div", {
ref: mountNode
});

@@ -46,0 +29,0 @@ }

@@ -6,9 +6,9 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _componentComponent = _interopRequireDefault(require("@reach/component-component"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

@@ -19,37 +19,21 @@ function Portal(_ref) {

type = _ref$type === void 0 ? "reach-portal" : _ref$type;
return _react["default"].createElement(_componentComponent["default"], {
getRefs: function getRefs() {
return {
mountNode: null,
portalNode: null
};
},
didMount: function didMount(_ref2) {
var refs = _ref2.refs,
forceUpdate = _ref2.forceUpdate;
// 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 portalNode = _ref3.refs.portalNode;
portalNode.ownerDocument.body.removeChild(portalNode);
},
render: function render(_ref4) {
var refs = _ref4.refs;
var portalNode = refs.portalNode;
var mountNode = (0, _react.useRef)(null);
var portalNode = (0, _react.useRef)(null);
if (!portalNode) {
return _react["default"].createElement("div", {
ref: function ref(div) {
return refs.mountNode = div;
}
});
} else {
return (0, _reactDom.createPortal)(children, portalNode);
}
}
var _useState = (0, _react.useState)(),
forceUpdate = _useState[1];
(0, _react.useLayoutEffect)(function () {
// 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 = mountNode.current.ownerDocument;
portalNode.current = ownerDocument.createElement(type);
ownerDocument.body.appendChild(portalNode.current);
forceUpdate({});
return function () {
portalNode.current.ownerDocument.body.removeChild(portalNode.current);
};
}, [type]);
return portalNode.current ? (0, _reactDom.createPortal)(children, portalNode.current) : _react["default"].createElement("div", {
ref: mountNode
});

@@ -56,0 +40,0 @@ }

{
"name": "@reach/portal",
"version": "0.6.2",
"version": "0.7.0",
"description": "Declarative portals for React",
"repository": {
"type": "git",
"url": "git+https://github.com/reach/reach-ui.git",
"directory": "packages/portal"
},
"main": "index.js",

@@ -10,5 +15,2 @@ "module": "es/index.js",

},
"dependencies": {
"@reach/component-component": "^0.6.2"
},
"peerDependencies": {

@@ -28,3 +30,3 @@ "react": "^16.8.0",

],
"gitHead": "00e73c5da6d25f50194612f74de71156fde2a80a"
"gitHead": "c6c10662e6eaf229594e4d6e6a38d8c9baa35ffa"
}

@@ -1,29 +0,25 @@

import React from "react";
import React, { useLayoutEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import Component from "@reach/component-component";
function Portal({ children, type = "reach-portal" }) {
return (
<Component
getRefs={() => ({ mountNode: null, portalNode: null })}
didMount={({ refs, forceUpdate }) => {
// 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: { portalNode } }) => {
portalNode.ownerDocument.body.removeChild(portalNode);
}}
render={({ refs }) => {
const { portalNode } = refs;
if (!portalNode) {
return <div ref={div => (refs.mountNode = div)} />;
} else {
return createPortal(children, portalNode);
}
}}
/>
let mountNode = useRef(null);
let portalNode = useRef(null);
let [, forceUpdate] = useState();
useLayoutEffect(() => {
// 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 = mountNode.current.ownerDocument;
portalNode.current = ownerDocument.createElement(type);
ownerDocument.body.appendChild(portalNode.current);
forceUpdate({});
return () => {
portalNode.current.ownerDocument.body.removeChild(portalNode.current);
};
}, [type]);
return portalNode.current ? (
createPortal(children, portalNode.current)
) : (
<div ref={mountNode} />
);

@@ -30,0 +26,0 @@ }

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc