@reach/portal - npm Package Compare versions

Comparing version 0.16.2 to 0.17.0

dist/declarations/src/index.d.ts

@@ -14,7 +14,2 @@ /**
 import * as React from "react";
-/**
- * Portal
- *
- * @see Docs https://reach.tech/portal#portal
- */
 declare const Portal: React.FC<PortalProps>;
@@ -45,2 +40,3 @@ /**
     containerRef?: React.RefObject<Node>;
+    unstable_skipInitialRender?: boolean;
 };
@@ -47,0 +43,0 @@ export default Portal;

dist/reach-portal.cjs.dev.js

@@ -15,15 +15,19 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["unstable_skipInitialRender"];
 /**
- * Welcome to @reach/portal!
- *
- * Creates and appends a DOM node to the end of `document.body` and renders a
- * React tree into it. Useful for rendering a natural React element hierarchy
- * with a different DOM hierarchy to prevent parent styles from clipping or
- * hiding content (for popovers, dropdowns, and modals).
- *
- * @see Docs   https://reach.tech/portal
- * @see Source https://github.com/reach/reach-ui/tree/main/packages/portal
- * @see React  https://reactjs.org/docs/portals.html
- */
-/**
  * Portal
@@ -34,3 +38,3 @@ *
 
-var Portal = function Portal(_ref) {
+var PortalImpl = function PortalImpl(_ref) {
   var children = _ref.children,
@@ -74,2 +78,23 @@ _ref$type = _ref.type,
 };
+
+var Portal = function Portal(_ref2) {
+  var unstable_skipInitialRender = _ref2.unstable_skipInitialRender,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var _React$useState = React.useState(false),
+      hydrated = _React$useState[0],
+      setHydrated = _React$useState[1];
+
+  React.useEffect(function () {
+    if (unstable_skipInitialRender) {
+      setHydrated(true);
+    }
+  }, [unstable_skipInitialRender]);
+
+  if (unstable_skipInitialRender && !hydrated) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(PortalImpl, props);
+};
 /**
@@ -76,0 +101,0 @@ * @see Docs https://reach.tech/portal#portal-props

dist/reach-portal.cjs.prod.js

@@ -11,15 +11,19 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["unstable_skipInitialRender"];
 /**
- * Welcome to @reach/portal!
- *
- * Creates and appends a DOM node to the end of `document.body` and renders a
- * React tree into it. Useful for rendering a natural React element hierarchy
- * with a different DOM hierarchy to prevent parent styles from clipping or
- * hiding content (for popovers, dropdowns, and modals).
- *
- * @see Docs   https://reach.tech/portal
- * @see Source https://github.com/reach/reach-ui/tree/main/packages/portal
- * @see React  https://reactjs.org/docs/portals.html
- */
-/**
  * Portal
@@ -30,3 +34,3 @@ *
 
-var Portal = function Portal(_ref) {
+var PortalImpl = function PortalImpl(_ref) {
   var children = _ref.children,
@@ -61,3 +65,24 @@ _ref$type = _ref.type,
 
+var Portal = function Portal(_ref2) {
+  var unstable_skipInitialRender = _ref2.unstable_skipInitialRender,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var _React$useState = React.useState(false),
+      hydrated = _React$useState[0],
+      setHydrated = _React$useState[1];
+
+  React.useEffect(function () {
+    if (unstable_skipInitialRender) {
+      setHydrated(true);
+    }
+  }, [unstable_skipInitialRender]);
+
+  if (unstable_skipInitialRender && !hydrated) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(PortalImpl, props);
+};
+
 exports.Portal = Portal;
 exports.default = Portal;

dist/reach-portal.esm.js

@@ -1,2 +0,2 @@
-import { useRef, useEffect, createElement } from 'react';
+import { useState, useEffect, createElement, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';
@@ -7,15 +7,19 @@ import { useForceUpdate } from '@reach/utils/use-force-update';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["unstable_skipInitialRender"];
 /**
- * Welcome to @reach/portal!
- *
- * Creates and appends a DOM node to the end of `document.body` and renders a
- * React tree into it. Useful for rendering a natural React element hierarchy
- * with a different DOM hierarchy to prevent parent styles from clipping or
- * hiding content (for popovers, dropdowns, and modals).
- *
- * @see Docs   https://reach.tech/portal
- * @see Source https://github.com/reach/reach-ui/tree/main/packages/portal
- * @see React  https://reactjs.org/docs/portals.html
- */
-/**
  * Portal
@@ -26,3 +30,3 @@ *
 
-var Portal = function Portal(_ref) {
+var PortalImpl = function PortalImpl(_ref) {
   var children = _ref.children,
@@ -66,2 +70,23 @@ _ref$type = _ref.type,
 };
+
+var Portal = function Portal(_ref2) {
+  var unstable_skipInitialRender = _ref2.unstable_skipInitialRender,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var _React$useState = useState(false),
+      hydrated = _React$useState[0],
+      setHydrated = _React$useState[1];
+
+  useEffect(function () {
+    if (unstable_skipInitialRender) {
+      setHydrated(true);
+    }
+  }, [unstable_skipInitialRender]);
+
+  if (unstable_skipInitialRender && !hydrated) {
+    return null;
+  }
+
+  return /*#__PURE__*/createElement(PortalImpl, props);
+};
 /**
@@ -68,0 +93,0 @@ * @see Docs https://reach.tech/portal#portal-props

package.json

 {
   "name": "@reach/portal",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "Declarative portals for React",
@@ -16,3 +16,3 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/utils": "0.16.0",
+    "@reach/utils": "0.17.0",
     "tiny-warning": "^1.0.3",
@@ -40,3 +40,3 @@ "tslib": "^2.3.0"
   ],
-  "gitHead": "d81d4627145952b415b42537ef6497838567baa2"
+  "gitHead": "d206aefac2bede58c06a54b18d48eee7537096e0"
 }

No alert changes

Improved metrics

Total package byte prevSize

15155

increased by9.79%

Lines of code

295

increased by18.95%

Dependency changes

• + Added@reach/utils@0.17.0(transitive)

• - Removed@reach/utils@0.16.0(transitive)

• Updated@reach/utils@0.17.0