Compound compononents work

components/Overlay.js

@@ -0,0 +1,27 @@
+const Overlay = props => (
+  <div className="dnd-container">
+    { props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
+    { props.children }
+    <style jsx>{`
+      .dnd-container {
+        position: relative;
+      }
+
+      .dnd-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
+        height: 100%;
+        z-index: 999;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.85);
+      }
+    `}</style>
+  </div>
+)
+
+export default Overlay

components/ReadFileDropContainer.js

@@ -15,28 +15,13 @@ const spec = {
 const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })
 
 const ReadFileDropContainer = props => props.connectDropTarget(
-  <div className="dnd-container">
+  <div>
-    { props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
+    {
-    {props.children}
+      React.Children.only(React.Children.map(
-    <style jsx>{`
+        props.children,
-      .dnd-container {
+        child => React.cloneElement(child, { isOver: props.isOver }),
-        position: relative;
+      )[0])
-      }
+    }
-
-      .dnd-overlay {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        width: 100%;
-        height: 100%;
-        z-index: 999;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: rgba(0, 0, 0, 0.85);
-      }
-    `}</style>
   </div>
 )
 

pages/editor.js

@@ -6,6 +6,7 @@ import domtoimage from 'dom-to-image'
 import Page from '../components/Page'
 import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Toolbar from '../components/Toolbar'
+import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
 import api from '../lib/api'
 import { THEMES, LANGUAGES, COLORS, DEFAULT_CODE } from '../lib/constants'
@@ -95,9 +96,11 @@ class Editor extends React.Component {
             <ReadFileDropContainer
               onDrop={droppedContent => this.setState({ droppedContent })}
             >
-              <Carbon config={this.state}>
+              <Overlay>
-                {this.state.droppedContent || this.props.content || DEFAULT_CODE}
+                <Carbon config={this.state}>
-              </Carbon>
+                  {this.state.droppedContent || this.props.content || DEFAULT_CODE}
+                </Carbon>
+              </Overlay>
             </ReadFileDropContainer>
           </div>