Merge pull request #740 from transloadit/fix/react-dashboard-modal-target

 react: Allow overriding <DashboardModal /> `target` prop, fixes #739

CHANGELOG.md

@@ -98,7 +98,7 @@ To be released: 2018-03-29.
 - [ ] dashboard: allow minimizing the Dashboard during upload (Uppy then becomes just a tiny progress indicator) (@arturi)
 - [ ] dashboard: cancel button for any kind of uploads? currently resume/pause only for tus, and cancel for XHR (@arturi, @goto-bus-stop)
 - [ ] dashboard: cancel button for transloadit assemblies (@arturi, @goto-bus-stop)
-- [ ] dashboard: disallow removing files if `bundle: true` in XHRUpload (@arturi) 
+- [ ] dashboard: disallow removing files if `bundle: true` in XHRUpload (@arturi)
 - [ ] dashboard: optional alert `onbeforeunload` while upload is in progress, safeguarding from accidentaly navigating away from a page with an ongoing upload
 - [ ] dashboard: add image cropping, study https://github.com/MattKetmo/darkroomjs/, https://github.com/fengyuanchen/cropperjs #151
 - [ ] core: css-in-js, while keeping non-random classnames (ideally prefixed) and useful preprocessor features. also see simple https://github.com/codemirror/CodeMirror/blob/master/lib/codemirror.css (@arturi, @goto-bus-stop)
@@ -123,6 +123,7 @@ To be released: 2018-03-29.
 - [x] s3: fix xhr response handlers (#625, @goto-bus-stop)
 - [ ] test: add typescript with JSDoc (@arturi)
 - [ ] dragdrop: allow customizing arrow icon https://github.com/transloadit/uppy/pull/374#issuecomment-334116208 (@arturi)
+- [x] react: Allow overriding `<DashboardModal />` `target` prop (#740, @goto-bus-stop)
 
 ## 0.23.3
 

examples/react-example/App.js

@@ -73,6 +73,7 @@ module.exports = class App extends React.Component {
           <DashboardModal
             uppy={this.uppy2}
             open={this.state.open}
+            target={document.body}
             onRequestClose={() => this.setState({ open: false })}
           />
         </div>

src/react/DashboardModal.js

@@ -17,10 +17,14 @@ class DashboardModal extends React.Component {
       {},
       this.props,
       {
-        target: this.container,
         onRequestCloseModal: this.props.onRequestClose
       }
     )
+
+    if (!options.target) {
+      options.target = this.container
+    }
+
     delete options.uppy
     uppy.use(DashboardPlugin, options)
 
@@ -55,6 +59,8 @@ class DashboardModal extends React.Component {
 
 DashboardModal.propTypes = {
   uppy: PropTypes.instanceOf(UppyCore).isRequired,
+  // Only check this prop type in the browser.
+  target: typeof window !== 'undefined' ? PropTypes.instanceOf(window.HTMLElement) : PropTypes.any,
   open: PropTypes.bool,
   onRequestClose: PropTypes.func,
   plugins: PropTypes.arrayOf(PropTypes.string),