casesandberg · casesandberg · Jan 11, 2020 · May 13, 2019
diff --git a/examples/with-portals/.gitignore b/examples/with-portals/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/with-portals/package.json b/examples/with-portals/package.json
@@ -0,0 +1,23 @@
+{
+  "dependencies": {
+    "react": "^16.8.6",
+    "react-color": "latest",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1"
+  },
+  "scripts": {
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/with-portals/public/index.html b/examples/with-portals/public/index.html
@@ -0,0 +1,8 @@
+<!doctype html>
+
+<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet" />
+<style>#root { font-family: -apple-system, BlinkMacSystemFont, sans-serif; height: 100vh; width: 100vw;
+  display: flex; align-items: center; justify-content: center; }</style>
+
+<div id="root"></div>
+<div id="root-portal"></div>
diff --git a/examples/with-portals/src/App.js b/examples/with-portals/src/App.js
@@ -0,0 +1,37 @@
+/* eslint-disable no-console */
+import React from 'react'
+
+import Portal from './Portal'
+
+export class App extends React.Component {
+  state = {
+    pickerVisible: false,
+  }
+
+  handleToggleVisibility = () => {
+    this.setState(({ pickerVisible }) => ({
+      pickerVisible: !pickerVisible,
+    }))
+  }
+
+  handleColorChange = ({ hex }) => console.log(hex)
+
+  render() {
+    return (
+      <div>
+        <button onClick={ this.handleToggleVisibility }>
+          Pick Color
+        </button>
+
+        {this.state.pickerVisible && (
+          <Portal
+            onChange={ this.handleColorChange }
+            onClose={ this.handleToggleVisibility }
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+export default App
diff --git a/examples/with-portals/src/Modal.js b/examples/with-portals/src/Modal.js
@@ -0,0 +1,32 @@
+import React from 'react'
+
+export const Modal = ({ children, onClose }) => (
+  <div
+    style={{
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <div
+      onClick={ onClose }
+      style={{
+        backgroundColor: 'rgba(0,0,0,0.2)',
+        cursor: 'pointer',
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+      }}
+    />
+    <div style={{ position: 'relative' }}>
+      {children}
+    </div>
+  </div>
+)
+
+export default Modal
diff --git a/examples/with-portals/src/Portal.js b/examples/with-portals/src/Portal.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import { SketchPicker } from 'react-color'
+import Modal from './Modal'
+
+export const Portal = ({ onClose, onChange }) => {
+  const contents = (
+    <Modal onClose={ onClose }>
+      <SketchPicker
+        color="#333"
+        onChangeComplete={ onChange }
+      />
+    </Modal>
+  )
+
+  return ReactDOM.createPortal(
+    contents,
+    document.getElementById('root-portal')
+  )
+}
+
+export default Portal
diff --git a/examples/with-portals/src/index.js b/examples/with-portals/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import App from './App'
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+)