Now using React hooks! Added unmountOnEmpty option.

.babelrc

@@ -1,4 +1,18 @@
 {
-  "presets": ["cf"],
-  "plugins": []
-}
+  "presets": [
+    "@babel/env",
+    "@babel/react",
+    "@babel/flow"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "env":{
+    "test":{
+      "plugins": [
+        "@babel/plugin-transform-runtime"
+      ]
+    }
+  }
+}

README.md

@@ -1,18 +1,13 @@
 # React Gateway
 
-> Render React DOM into a new context (aka "Portal")
+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 and in React Native applications
-[when used correctly](#react-native-example).
+> This project is a forked update from https://github.com/cloudflare/react-gateway. Simplified test builds and updated with react hooks.
 
 ## Installation
 
 ```sh
-$ npm install --save react-gateway
+$ npm install --save @chardskarth/react-gateway
 ```
 
 ## Example
@@ -23,7 +18,7 @@ import {
   Gateway,
   GatewayDest,
   GatewayProvider
-} from 'react-gateway';
+} from '@chardskarth/react-gateway';
 
 export default class Application extends React.Component {
   render() {
@@ -115,6 +110,8 @@ name.
     }
   }
 ```
+You could also add an `unmountOnEmpty` option to prevent a `GatewayDest` element from rendering if 
+there are no `<Gateway into>` match for a `<GatewayDest name>`.
 
 Then in any of your components (that get rendered inside of the
 `<GatewayProvider>`) add a `<Gateway>`.
@@ -156,6 +153,20 @@ component), and they will be passed to the created element.
   }
 ```
 
+## GatewayDest props
+
+| Prop Name | Description |
+| -- | -- |
+| `name` | name of this container. Renders all `Gateway` that have the matching `Gateway` `into` prop value. |
+| `component` | React component that renders. Defaults to `div`.  |
+| `unmountOnEmpty` | if true, the DOM container removes itself if there are no child `Gateway` to be rendered. |
+
+## Gateway props
+| Prop Name | Description |
+| -- | -- |
+| `into` | name of the `GatewayDest` to render itself into. |
+| `sort` | Number. Defines its sorting order among its sibling `Gateway` |
+
 ## How it works
 
 React Gateway works very differently than most React "portals" in order to work
@@ -169,42 +180,3 @@ This registry is created by `<GatewayProvider>` and passed to `<Gateway>` and
 
 Whenever a child or container is added or removed, React Gateway will
 update its internal registry and ensure things are properly rendered.
-
-## React Native example
-
-React Gateway does not directly depend on `react-dom`, so it works fine with
-React Native under one condition:
-
-**You must pass React Native component like `View` or similar to
-`component` prop of `<GatewayDest>`.**
-
-Because if you don't, `<GatewayDest>` will try to render `div` element, which
-is not available.
-
-```js
-import React from 'react';
-import { Text, View } from 'react-native';
-import {
-  Gateway,
-  GatewayDest,
-  GatewayProvider
-} from 'react-gateway';
-
-export default class Application extends React.Component {
-  render() {
-    return (
-      <GatewayProvider>
-        <View>
-          <Text>React Gateway Native Example</Text>
-          <View>
-            <Gateway into="one">
-              <Text>Text rendered elsewhere</Text>
-            </Gateway>
-          </View>
-          <GatewayDest name="one" component={View} />
-        </View>
-      </GatewayProvider>
-    );
-  }
-}
-```

jest.config.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-gateway",
-  "version": "3.0.0",
+  "name": "@chardskarth/react-gateway",
+  "version": "3.1.0",
   "description": "Render React DOM into a new context",
   "main": "lib/index.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "format": "jsfmt -w *.js src/ test/",
     "lint": "eslint src/ test/",
     "prepublish": "npm run build",
-    "test": "karma start"
+    "test": "jest --verbose"
   },
   "keywords": [
     "react",
@@ -18,42 +18,37 @@
     "modal",
     "dialog"
   ],
-  "author": "James Kyle <me@thejameskyle.com>",
-  "repository": "https://github.com/cloudflare/react-gateway",
+  "author": "Richard Domingo <chardskarth@gmail.com>",
+  "repository": "https://github.com/chardskarth/react-gateway",
   "license": "BSD-3-Clause",
   "dependencies": {
     "prop-types": "^15.5.0",
     "react-prop-types": "^0.4.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.1.1",
-    "babel-core": "^6.0.20",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-export-default-from": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-flow": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/runtime": "^7.8.4",
     "babel-eslint": "^6.0.2",
-    "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",
     "eslint-plugin-cflint": "^1.0.0",
     "express": "^4.13.3",
+    "jest": "^25.1.0",
     "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": "^15.0.0-0",
-    "react": "^15.0.0-0",
-    "react-dom": "^15.0.0-0"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-test-renderer": "^16.12.0",
+    "@testing-library/react": "12.1.5"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0 || ^16.0.0"