Add documentation pages for all React components.

website/src/docs/react-dashboard-modal.md

@@ -0,0 +1,75 @@
+---
+title: "<DashboardModal />"
+type: docs
+permalink: docs/react/dashboard-modal/
+order: 55
+---
+
+The `<DashboardModal />` component wraps the [Dashboard][] plugin, allowing control over the modal `open` state using a prop.
+
+<!-- Make sure the old name of this section still works -->
+<a id="Options"></a>
+## Props
+
+On top of all the [Dashboard][] options, the `<DashboardModal />` plugin adds two additional props:
+
+ - `open` - Boolean true or false, setting this to `true` opens the modal and setting it to `false` closes it.
+ - `onRequestClose` - Callback called when the user attempts to close the modal, either by clicking the close button or by clicking outside the modal (if the `closeModalOnClickOutside` prop is set).
+
+To use other plugins like [Webcam][] with the `<DashboardModal />` component, add them to the Uppy instance and then specify their `id` in the [`plugins`](/docs/dashboard/#plugins) prop:
+
+```js
+// Do this wherever you initialize Uppy, eg. in a React component's constructor method.
+// Do NOT do it in `render()` or any other method that is called more than once!
+uppy.use(Webcam) // `id` defaults to "Webcam"
+uppy.use(Webcam, { id: 'MyWebcam' }) // `id` is… "MyWebcam"
+```
+
+Then do `plugins={['Webcam']}`.
+
+A full example that uses a button to open the modal is shown below:
+
+```js
+class MusicUploadButton extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      modalOpen: false
+    }
+
+    this.handleOpen = this.handleOpen.bind(this)
+    this.handleClose = this.handleClose.bind(this)
+  }
+
+  handleOpen () {
+    this.setState({
+      modalOpen: true
+    })
+  }
+
+  handleClose () {
+    this.setState({
+      modalOpen: false
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={this.handleOpen}>Upload some music</button>
+        <DashboardModal
+          uppy={this.props.uppy}
+          closeModalOnClickOutside
+          open={this.state.modalOpen}
+          onRequestClose={this.handleClose}
+          plugins={['Webcam']}
+        />
+      </div>
+    );
+  }
+}
+```
+
+[Dashboard]: /docs/dashboard/
+[Webcam]: /docs/webcam/

website/src/docs/react-dashboard.md

@@ -1,20 +1,17 @@
 ---
-title: "DashboardModal"
+title: "<Dashboard />"
 type: docs
-permalink: docs/react/dashboard-modal/
-order: 51
+permalink: docs/react/dashboard/
+order: 54
 ---
 
-The `<DashboardModal />` component wraps the [Dashboard][] plugin, allowing control over the modal `open` state using a prop.
+The `<Dashboard />` component wraps the [Dashboard][] plugin. It only renders the Dashboard inline. To use the Dashboard modal (`inline: false`), use the [`<DashboardModal />`](/docs/react/dashboard-modal) component.
 
-## Options
+## Props
 
-On top of all the [Dashboard][] options, the `<DashboardModal />` plugin adds two additional props:
+The `<Dashboard />` component supports all [Dashboard][] options as props.
 
- - `open` - Boolean true or false, setting this to `true` opens the modal and setting it to `false` closes it.
- - `onRequestClose` - Callback called when the user attempts to close the modal, either by clicking the close button or by clicking outside the modal (if the `closeModalOnClickOutside` prop is set).
-
-To use other plugins like [Webcam][] with the `<DashboardModal />` component, add them to the Uppy instance and then specify their `id` in the [`plugins`](/docs/dashboard/#plugins) prop:
+The `<Dashboard />` cannot be passed to a `target:` option of a remote provider or plugins like [Webcam][]. To use other plugins like [Webcam][] with the `<Dashboard />` component, first add them to the Uppy instance, and then specify their `id` in the [`plugins`](/docs/dashboard/#plugins) prop:
 
 ```js
 // Do this wherever you initialize Uppy, eg. in a React component's constructor method.
@@ -23,50 +20,14 @@ uppy.use(Webcam) // `id` defaults to "Webcam"
 uppy.use(Webcam, { id: 'MyWebcam' }) // `id` is… "MyWebcam"
 ```
 
-Then do `plugins={['Webcam']}`.
-
-A full example that uses a button to open the modal is shown below:
+Then in `render()` do:
 
 ```js
-class MusicUploadButton extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      modalOpen: false
-    }
-
-    this.handleOpen = this.handleOpen.bind(this)
-    this.handleClose = this.handleClose.bind(this)
-  }
-
-  handleOpen () {
-    this.setState({
-      modalOpen: true
-    })
-  }
-
-  handleClose () {
-    this.setState({
-      modalOpen: false
-    })
-  }
-
-  render () {
-    return (
-      <div>
-        <button onClick={this.handleOpen}>Upload some music</button>
-        <DashboardModal
-          uppy={this.props.uppy}
-          closeModalOnClickOutside
-          open={this.state.modalOpen}
-          onRequestClose={this.handleClose}
-          plugins={['Webcam']}
-        />
-      </div>
-    );
-  }
-}
+<Dashboard
+  plugins={['Webcam']}
+  {...props}
+/>
 ```
 
 [Dashboard]: /docs/dashboard/
+[Webcam]: /docs/webcam/

website/src/docs/react-dragdrop.md

@@ -0,0 +1,14 @@
+---
+title: "<DragDrop />"
+type: docs
+permalink: docs/react/dragdrop/
+order: 52
+---
+
+The `<DragDrop />` component wraps the [DragDrop][] plugin.
+
+## Props
+
+The `<DragDrop />` component supports all [DragDrop][] options as props.
+
+[DragDrop]: /docs/dragdrop/

website/src/docs/react-progressbar.md

@@ -0,0 +1,14 @@
+---
+title: "<ProgressBar />"
+type: docs
+permalink: docs/react/progressbar/
+order: 53
+---
+
+The `<ProgressBar />` component wraps the [ProgressBar][] plugin.
+
+## Props
+
+The `<ProgressBar />` component supports all [ProgressBar][] options as props.
+
+[ProgressBar]: /docs/progressbar/

website/src/docs/react-statusbar.md

@@ -0,0 +1,14 @@
+---
+title: "<StatusBar />"
+type: docs
+permalink: docs/react/statusbar/
+order: 51
+---
+
+The `<StatusBar />` component wraps the [StatusBar][] plugin.
+
+## Props
+
+The `<StatusBar />` component supports all [StatusBar][] options as props.
+
+[StatusBar]: /docs/statusbar/

website/src/docs/react.md

@@ -62,8 +62,8 @@ The plugins that are available as React component wrappers are:
 
 [React]: https://facebook.github.io/react
 [Preact]: https://preactjs.com/
-[Dashboard]: /docs/dashboard
-[DragDrop]: /docs/dragdrop
-[ProgressBar]: /docs/progressbar
-[StatusBar]: /docs/statusbar
+[Dashboard]: /docs/react/dashboard
+[DragDrop]: /docs/react/dragdrop
+[ProgressBar]: /docs/react/progressbar
+[StatusBar]: /docs/react/statusbar
 [DashboardModal]: /docs/react/dashboard-modal