Support for React v16 Portals (#1)

* Use React portals to render children

* Update LICENSE

* Bump to 1.0.0 for React v16 support

* Remove dist files

* Exclude package-lock.json

* Provide a fallback for React v15 or cross-frame rendering

* Update examples

* Bump dependencies for webpack 4 and babel 7

* Bump Node.js versions

* Update README.md

* Fix incorrect component name

* Update README.md

* Update README.md

* Remove object spread syntax for Node.js 6 compatibility

.gitignore

@@ -2,4 +2,4 @@ node_modules
 npm-debug.log
 /.nyc_output
 /coverage
-/lib
+package-lock.json

.travis.yml

@@ -9,8 +9,8 @@ os:
 
 node_js:
   - '6'
-  - '5'
-  - '4'
+  - '8'
+  - '10'
 
 before_install:
   - npm install -g npm

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Trend Micro Inc.
+Copyright (c) 2017-present Trend Micro Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -20,31 +20,44 @@ Demo: https://trendmicro-frontend.github.io/react-portal
 
   ```js
   import Portal from '@trendmicro/react-portal';
+
+  // Use LegacyPortal if you need cross-frame rendering support.
+  import LegacyPortal from '@trendmicro/react-portal/LegacyPortal';
   ```
 
 ## Usage
 
-```js
+### Portal
+
+```jsx
 <Portal>
     This text is transported to the end of document.body.
 </Portal>
 
 <Portal node={document.body && document.body.querySelector('#modal-container')}>
-    This text is transported to a specified element.
+    This text is transported to a DOM element.
 </Portal>
 ```
 
+### LegacyPortal
+
+```jsx
+<LegacyPortal
+    node={window.top.document && window.top.document.querySelector('#modal-container')}
+>
+    This text is transported to a DOM element within the top window document.
+</LegacyPortal>
+```
+
 ## Examples
 
 We recommend using [styled-components](https://github.com/styled-components/styled-components) to make style changes, like so:
 
 ```js
-import Portal from '@trendmicro/react-portal';
 import PropTypes from 'prop-types';
-import React from 'react';
 import styled, { keyframes } from 'styled-components';
 
-const StyledPortal = styled(Portal)`
+const Overlay = styled.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -102,38 +115,51 @@ Fade.defaultProps = {
 Then you can nest components in the following way:
 
 ### Center Modal Vertically
-```js
-<StyledPortal>
-    <VerticallyCenter>
-        <Modal>
-            Your modal content goes here
-        </Modal>
-    </VeticallyCenter>
-</StyledPortal>
-```
-
-### Fade-in Animation
 
-```js
-<StyledPortal>
-    <VerticallyCenter>
-        <Fade timeout={150}>
+```jsx
+<Portal>
+    <Overlay>
+        <VerticallyCenter>
             <Modal>
                 Your modal content goes here
             </Modal>
-        </Fade>
-    </VeticallyCenter>
-</StyledPortal>
+        </VeticallyCenter>
+    </Overlay>
+</Portal>
+```
+
+### Fade-in Animation
+
+```jsx
+<Portal>
+    <Overlay>
+        <VerticallyCenter>
+            <Fade timeout={150}>
+                <Modal>
+                    Your modal content goes here
+                </Modal>
+            </Fade>
+        </VeticallyCenter>
+    </Overlay>
+</Portal>
 ```
 
 ## Fullscreen Modal From Within an Iframe
 
-#### Specify the node property with an DOM element within the top window document
+#### Transport children to a DOM element within the top window document
 
-```js
-<StyledPortal
+```jsx
+<LegacyPortal
     node={window.top.document && window.top.document.querySelector('#modal-container')}
 >
+    <Overlay>
+        <Fade timeout={150}>
+            <Modal>
+                Your modal content goes here
+            </Modal>
+        </Fade>
+    </Overlay>
+</LegacyPortal>
 ```
 
 #### Implement a `persistStyles()` function to synchronize style changes
@@ -191,7 +217,13 @@ See a complete example at https://github.com/trendmicro-frontend/react-portal/bl
 
 ### Properties
 
-#### Dropdown
+#### Portal
+
+Name | Type | Default | Description
+:--- | :--- | :------ | :----------
+node | DOM node | document.body | A root DOM node to render a React element.
+
+#### LegacyPortal
 
 Name | Type | Default | Description
 :--- | :--- | :------ | :----------

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    extends: '@trendmicro/babel-config',
+    presets: [
+        '@babel/preset-env',
+        '@babel/preset-react'
+    ]
+};