react-gateway - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

package.json

 {
   "name": "react-gateway",
-  "version": "1.1.0",
-  "description": "Render React DOM into a new context on document.body",
+  "version": "2.0.0",
+  "description": "Render React DOM into a new context",
   "main": "index.js",
   "scripts": {
+    "build": "babel src -d lib",
+    "example": "browserify example/browser.js -o example/bundle.js -t babelify --debug && babel-node example/server.js",
+    "format": "jsfmt -w *.js src/ test/",
+    "lint": "eslint *.js src/ test/",
+    "prepublish": "npm run build",
     "test": "karma start"
@@ -17,18 +22,33 @@ },
   "author": "James Kyle <[e-mail]>",
-  "license": "ISC",
+  "license": "BSD-3-Clause",
   "dependencies": {
-    "exenv": "^1.2.0",
-    "react": "^0.14.2",
-    "react-dom": "^0.14.2"
+    "react": "^0.14.2"
   },
   "devDependencies": {
-    "chai": "^3.4.0",
-    "jsdom": "^7.0.2",
+    "babel-cli": "^6.1.1",
+    "babel-core": "^6.0.20",
+    "babel-preset-cf": "^1.2.0",
+    "babelify": "^7.2.0",
+    "browserify-istanbul": "^0.2.1",
+    "chai": "^3.4.1",
+    "defined": "^1.0.0",
+    "eslint": "^1.8.0",
+    "express": "^4.13.3",
+    "jsfmt": "^0.5.2",
     "karma": "^0.13.15",
+    "karma-beep-reporter": "^0.1.4",
     "karma-browserify": "^4.4.0",
+    "karma-chrome-launcher": "^0.2.1",
+    "karma-coverage": "^0.5.3",
+    "karma-firefox-launcher": "^0.1.6",
     "karma-mocha": "^0.2.0",
     "karma-mocha-reporter": "^1.1.1",
+    "karma-safari-launcher": "^0.1.1",
+    "karma-sauce-launcher": "^0.3.0",
+    "karma-tape-reporter": "^1.0.3",
+    "minimist": "^1.2.0",
     "mocha": "^2.3.3",
-    "react-addons-test-utils": "^0.14.2"
+    "react-addons-test-utils": "^0.14.2",
+    "react-dom": "^0.14.2"
   }
 }

README.md

 # React Gateway
 
-> Render React DOM into a new context on document.body
+> Render React DOM into a new context (aka "Portal")
 
+This can be used to implement various UI components such as modals.
+See [`react-modal2`](https://github.com/cloudflare/react-modal2).
+
+It also works in universal (isomorphic) React applications without any
+additional setup.
+
 ## Installation
@@ -11,14 +17,32 @@
 
-## Usage
+## Example
 
 ```js
 import React from 'react';
-import ReactGateway from 'react-gateway';
+import {
+  Gateway,
+  GatewayDest,
+  GatewayProvider
+} from 'react-gateway';
 
-export default class MyComponent extends React.Component {
+export default class Application extends React.Component {
   render() {
     return (
-      <ReactGateway to={document.body}>
-        <h1>Hello World</h1>
-      </ReactGateway>
+      <GatewayProvider>
+        <h1>React Gateway Universal Example</h1>
+        <div className="container">
+          <Gateway into="one">
+            <div className="item">Item 1</div>
+          </Gateway>
+          <Gateway into="two">
+            <div className="item">Item 2</div>
+          </Gateway>
+          <Gateway into="one">
+            <div className="item">Item 3</div>
+          </Gateway>
+          <div className="item">Item 4</div>
+        </div>
+        <GatewayDest name="one" tagName="section" className="hello"/>
+        <GatewayDest name="two"/>
+      </GatewayProvider>
     );
@@ -29,7 +53,101 @@ }
 
-## Props
+## Usage
 
-| Name | Type | Description |
-| --- | --- | --- | --- |
-| `to` | `HTMLElement` | Specify where in the DOM to go to. (Default: `document.body`) |
-| `className` | `String` | Add a className to the generated DOM node. |
+To get started with React Gateway, first wrap your application in the
+`<GatewayProvider>`.
+
+```diff
+  import React from 'react';
++ import {
++   GatewayProvider
++ } from 'react-gateway';
+
+  export default class Application extends React.Component {
+    render() {
+      return (
++       <GatewayProvider>
+          <div>
+            {this.props.children}
+          </div>
++       </GatewayProvider>
+      );
+    }
+  }
+```
+
+Then insert a `<GatewayDest>` whereever you want it to render and give it a
+name.
+
+```diff
+  import React from 'react';
+  import {
+    GatewayProvider,
++   GatewayDest
+  } from 'react-gateway';
+
+  export default class Application extends React.Component {
+    render() {
+      return (
+        <GatewayProvider>
+          <div>
+            {this.props.children}
++           <GatewayDest name="global"/>
+          </div>
+        </GatewayProvider>
+      );
+    }
+  }
+```
+
+Then in any of your components (that get rendered inside of the
+`<GatewayProvider>`) add a `<Gateway>`.
+
+```diff
+  import React from 'react';
++ import {Gateway} from 'react-gateway';
+
+  export default class MyComponent extends React.Component {
+    render() {
+      return (
+        <div>
++         <Gateway into="global">
++           Will render into the "global" gateway.
++         </Gateway>
+        </div>
+      );
+    }
+  }
+```
+
+If you want to customize the `<GatewayDest>` element, you can pass any props,
+including `tagName`, and they will be passed to the created element.
+
+```diff
+  export default class Application extends React.Component {
+    render() {
+      return (
+        <GatewayProvider>
+          <div>
+            {this.props.children}
+-           <GatewayDest name="global"/>
++           <GatewayDest name="global" tagName="section" className="global-gateway"/>
+          </div>
+        </GatewayProvider>
+      );
+    }
+  }
+```
+
+## How it works
+
+React Gateway works very differently than most React "portals" in order to work
+in server-side rendered React applications.
+
+It maintains an internal registry of "containers" and "children" which manages
+where things should be rendered.
+
+This registry is created by `<GatewayProvider>` and passed to `<Gateway>` and
+`<GatewayDest>` invisibly via React's `contextTypes`.
+
+Whenever a child or container is added or removed, React Gateway will
+update its internal registry and ensure things are properly rendered.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

17355

increased by104.49%

Dependency count

1

decreased by-66.67%

Number of package files

11

increased by57.14%

Lines of code

183

increased by11.59%

Number of lines in readme file

152

increased by347.06%

Worsened metrics

Dev dependency count

25

increased by212.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedexenv@^1.2.0

• - Removedreact-dom@^0.14.2

• - Removedexenv@1.2.2(transitive)

• - Removedreact-dom@0.14.10(transitive)