react-portalize - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/cjs/Portalize.js

@@ -24,2 +24,11 @@ "use strict";
 
+function _ref2(children, _ref) {
+  var provider = _ref.provider,
+      value = _ref.value;
+  return _react.default.createElement(provider, {
+    children: children,
+    value: value
+  });
+}
+
 function _render() {
@@ -29,3 +38,16 @@ this.nodes = typeof document !== 'undefined' && document.querySelectorAll(this.props.container);
   if (this.nodes === false) {
-    PORTALS[this.props.container] = this.props.children;
+    var _this$props = this.props,
+        children = _this$props.children,
+        server = _this$props.server,
+        providers = _this$props.providers;
+
+    if (server === false) {
+      return null;
+    }
+
+    if (providers !== void 0 && providers.length > 0) {
+      children = providers.reduceRight(_ref2, children);
+    }
+
+    PORTALS[this.props.container] = children;
     return null;
@@ -69,6 +91,12 @@ } else if (this.nodes.length === 0) {
 Portalize.propTypes = {
-  container: _propTypes.default.string.isRequired
+  container: _propTypes.default.string.isRequired,
+  providers: _propTypes.default.arrayOf(_propTypes.default.shape({
+    provider: _propTypes.default.object,
+    value: _propTypes.default.any
+  })),
+  server: _propTypes.default.bool.isRequired
 };
 Portalize.defaultProps = {
-  container: '#portals'
+  container: '#portals',
+  server: true
 };

dist/es/Portalize.js

@@ -13,2 +13,11 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 
+function _ref2(children, _ref) {
+  var provider = _ref.provider,
+      value = _ref.value;
+  return React.createElement(provider, {
+    children: children,
+    value: value
+  });
+}
+
 function _render() {
@@ -18,3 +27,16 @@ this.nodes = typeof document !== 'undefined' && document.querySelectorAll(this.props.container);
   if (this.nodes === false) {
-    PORTALS[this.props.container] = this.props.children;
+    var _this$props = this.props,
+        children = _this$props.children,
+        server = _this$props.server,
+        providers = _this$props.providers;
+
+    if (server === false) {
+      return null;
+    }
+
+    if (providers !== void 0 && providers.length > 0) {
+      children = providers.reduceRight(_ref2, children);
+    }
+
+    PORTALS[this.props.container] = children;
     return null;
@@ -57,7 +79,13 @@ } else if (this.nodes.length === 0) {
 Portalize.propTypes = {
-  container: PropTypes.string.isRequired
+  container: PropTypes.string.isRequired,
+  providers: PropTypes.arrayOf(PropTypes.shape({
+    provider: PropTypes.object,
+    value: PropTypes.any
+  })),
+  server: PropTypes.bool.isRequired
 };
 Portalize.defaultProps = {
-  container: '#portals'
+  container: '#portals',
+  server: true
 };
 export { Portalize as default };

package.json

 {
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/cjs/index.js",
@@ -4,0 +4,0 @@ "module": "dist/es/index.js",

README.md

@@ -35,4 +35,5 @@ # Portalize
 
-## Example
+## Examples
 **[Hello world](examples/hello-world)**
+**[Hello world w/ Context](examples/hello-world-context)**
 
@@ -42,10 +43,38 @@ ____
 ## react-portalize
-### `<Portalize container={string} children={React.Component}>`
-- `container {string}`
+```js
+<Portalize
+  container={string}
+  children={React.Component}
+  providers={Array}
+  skipSSR={boolean}
+/>
+```
+- `container <string>`
   - The DOM selector you'd like to render your children into
   - **default** `#portals`
 
-- `children {React.Component}`
+- `children <React.Component>`
   - Anything React can render
 
+- `server <boolean>`
+  - If you want to skip rendering this component on the server side you can do
+    so with the `server={false}` flag
+    - **default** `true`
+
+- `providers <Array[Object<{provider, value}>]>`
+  - Critically, this component will not work with portals that utilize context
+    out of the box. This is because the children are never rendered into the
+    virtual DOM tree on the server side. This hacky approach fixes that problem
+    by creating your portals with `<Provider value={}/>` components wrapped
+    around them. The providers supplied in the array are reduced from the
+    right, so `[a, b, c]` renders as `<a><b><c/></b></a>`. You can check out
+    an example **[here](examples/hello-world-context)**.
+    ```js
+    <Portalize providers={[{provider: YourProvider, value: YourProviderValue}]}>
+      <YourConsumer>
+        {value => JSON.stringify(value)}
+      </YourConsumer>
+    </Portalize>
+    ```
+
 ## react-portalize/server
@@ -52,0 +81,0 @@ ### `renderPortalsToString(html <string>)`

src/Portalize.js

@@ -15,7 +15,15 @@ import React from 'react'
   static propTypes = {
-    container: PropTypes.string.isRequired
+    container: PropTypes.string.isRequired,
+    providers: PropTypes.arrayOf(
+      PropTypes.shape({
+        provider: PropTypes.object,
+        value: PropTypes.any
+      })
+    ),
+    server: PropTypes.bool.isRequired
   }
 
   static defaultProps = {
-    container: '#portals'
+    container: '#portals',
+    server: true
   }
@@ -30,3 +38,17 @@
     if (this.nodes === false) {
-      PORTALS[this.props.container] = this.props.children
+      let {children, server, providers} = this.props
+
+      if (server === false) {
+        return null
+      }
+
+      if (providers !== void 0 && providers.length > 0) {
+        children = providers.reduceRight(
+          (children, {provider, value}) =>
+            React.createElement(provider, {children, value}),
+          children
+        )
+      }
+
+      PORTALS[this.props.container] = children
       return null
@@ -33,0 +55,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

14020

increased by26.91%

Lines of code

245

increased by37.64%

Number of lines in readme file

140

increased by26.13%

No dependency changes