Remove `target` option from examples and document consistently (#5146)

README.md

@@ -41,8 +41,8 @@ import Tus from '@uppy/tus'
 const uppy = new Uppy()
   .use(Dashboard, { trigger: '#select-files' })
   .use(RemoteSources, { companionUrl: 'https://companion.uppy.io' })
-  .use(Webcam, { target: Dashboard })
-  .use(ImageEditor, { target: Dashboard })
+  .use(Webcam)
+  .use(ImageEditor)
   .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
   .on('complete', (result) => {
     console.log('Upload result:', result)

docs/guides/migration-guides.md

@@ -60,16 +60,14 @@ new Uppy()
 		companionAllowedHosts: COMPANION_ALLOWED_HOSTS,
 	})
 	.use(Webcam, {
-		target: Dashboard,
 		showVideoSourceDropdown: true,
 		showRecordingLength: true,
 	})
 	.use(Audio, {
-		target: Dashboard,
 		showRecordingLength: true,
 	})
-	.use(ScreenCapture, { target: Dashboard })
-	.use(ImageEditor, { target: Dashboard })
+	.use(ScreenCapture)
+	.use(ImageEditor)
 	.use(Transloadit, {
 		service: 'https://api2.transloadit.com',
 		async getAssemblyOptions(file) {

docs/presets/remote-sources.mdx

@@ -135,7 +135,8 @@ default: `same-origin`).
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string`, `Element`, `Function`, or `UIPlugin`, default: `Dashboard`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 [`request.credentials` value]:
 	https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

docs/sources/audio.mdx

@@ -50,7 +50,7 @@ yarn add @uppy/audio
         import { Uppy, Dashboard, Audio } from "{{UPPY_JS_URL}}"
         const uppy = new Uppy()
         uppy.use(Dashboard, { inline: true, target: 'body' })
-        uppy.use(Audio, { target: Uppy.Dashboard })
+        uppy.use(Audio)
       `}
     </UppyCdnExample>
   </TabItem>
@@ -67,9 +67,7 @@ import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 import '@uppy/audio/dist/style.min.css';
 
-new Uppy()
-	.use(Dashboard, { inline: true, target: 'body' })
-	.use(Audio, { target: Dashboard });
+new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(Audio);
 ```
 
 ### API
@@ -87,8 +85,9 @@ Configures the title / name shown in the UI, for instance, on Dashboard tabs
 
 #### `target`
 
-DOM element, CSS selector, or plugin to place the audio into (`string` or
-`Element`, default: `null`).
+DOM element, CSS selector, or plugin to place the drag and drop area into
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `showAudioSourceDropdown`
 

docs/sources/companion-plugins/box.mdx

@@ -76,10 +76,9 @@ import Box from '@uppy/box';
 import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 
-new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Box, {
-	target: Dashboard,
-	companionUrl: 'https://your-companion.com',
-});
+new Uppy()
+	.use(Dashboard, { inline: true, target: '#dashboard' })
+	.use(Box, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -150,7 +149,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/dropbox.mdx

@@ -76,10 +76,9 @@ import Dropbox from '@uppy/dropbox';
 import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 
-new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Dropbox, {
-	target: Dashboard,
-	companionUrl: 'https://your-companion.com',
-});
+new Uppy()
+	.use(Dashboard, { inline: true, target: '#dashboard' })
+	.use(Dropbox, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -149,7 +148,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/facebook.mdx

@@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css';
 
 new Uppy()
 	.use(Dashboard, { inline: true, target: '#dashboard' })
-	.use(Facebook, {
-		target: Dashboard,
-		companionUrl: 'https://your-companion.com',
-	});
+	.use(Facebook, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -148,7 +145,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/google-drive.mdx

@@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css';
 
 new Uppy()
 	.use(Dashboard, { inline: true, target: '#dashboard' })
-	.use(GoogleDrive, {
-		target: Dashboard,
-		companionUrl: 'https://your-companion.com',
-	});
+	.use(GoogleDrive, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -152,7 +149,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/instagram.mdx

@@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css';
 
 new Uppy()
 	.use(Dashboard, { inline: true, target: '#dashboard' })
-	.use(Instagram, {
-		target: Dashboard,
-		companionUrl: 'https://your-companion.com',
-	});
+	.use(Instagram, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -142,7 +139,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/onedrive.mdx

@@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css';
 
 new Uppy()
 	.use(Dashboard, { inline: true, target: '#dashboard' })
-	.use(OneDrive, {
-		target: Dashboard,
-		companionUrl: 'https://your-companion.com',
-	});
+	.use(OneDrive, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -142,7 +139,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/unsplash.mdx

@@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css';
 
 new Uppy()
 	.use(Dashboard, { inline: true, target: '#dashboard' })
-	.use(Unsplash, {
-		target: Dashboard,
-		companionUrl: 'https://your-companion.com',
-	});
+	.use(Unsplash, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -127,7 +124,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/url.mdx

@@ -83,10 +83,9 @@ import Url from '@uppy/url';
 import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 
-new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Url, {
-	target: Dashboard,
-	companionUrl: 'https://your-companion.com',
-});
+new Uppy()
+	.use(Dashboard, { inline: true, target: '#dashboard' })
+	.use(Url, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -110,7 +109,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/companion-plugins/zoom.mdx

@@ -76,10 +76,9 @@ import Zoom from '@uppy/zoom';
 import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 
-new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Zoom, {
-	target: Dashboard,
-	companionUrl: 'https://your-companion.com',
-});
+new Uppy()
+	.use(Dashboard, { inline: true, target: '#dashboard' })
+	.use(Zoom, { companionUrl: 'https://your-companion.com' });
 ```
 
 ### Use in Companion
@@ -121,7 +120,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default:
 #### `target`
 
 DOM element, CSS selector, or plugin to place the drag and drop area into
-(`string` or `Element`, default: `null`).
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `companionUrl`
 

docs/sources/screen-capture.mdx

@@ -62,7 +62,7 @@ yarn add @uppy/screen-capture
         import { Uppy, Dashboard, ScreenCapture } from "{{UPPY_JS_URL}}"
         const uppy = new Uppy()
         uppy.use(Dashboard, { inline: true, target: 'body' })
-        uppy.use(ScreenCapture, { target: Uppy.Dashboard })
+        uppy.use(ScreenCapture)
       `}
     </UppyCdnExample>
   </TabItem>
@@ -79,9 +79,7 @@ import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 import '@uppy/screen-capture/dist/style.min.css';
 
-new Uppy()
-	.use(Dashboard, { inline: true, target: 'body' })
-	.use(ScreenCapture, { target: Dashboard });
+new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(ScreenCapture);
 ```
 
 ### API
@@ -99,8 +97,9 @@ Configures the title / name shown in the UI, for instance, on Dashboard tabs
 
 #### `target`
 
-DOM element, CSS selector, or plugin to place the screen capture into (`string`
-or `Element`, default: `null`).
+DOM element, CSS selector, or plugin to place the drag and drop area into
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `displayMediaConstraints`
 

docs/sources/webcam.mdx

@@ -51,7 +51,7 @@ yarn add @uppy/webcam
         import { Uppy, Dashboard, Webcam } from "{{UPPY_JS_URL}}"
         const uppy = new Uppy()
         uppy.use(Dashboard, { inline: true, target: 'body' })
-        uppy.use(Webcam, { target: Uppy.Dashboard })
+        uppy.use(Webcam)
       `}
     </UppyCdnExample>
   </TabItem>
@@ -77,9 +77,7 @@ import '@uppy/core/dist/style.min.css';
 import '@uppy/dashboard/dist/style.min.css';
 import '@uppy/webcam/dist/style.min.css';
 
-new Uppy()
-	.use(Dashboard, { inline: true, target: 'body' })
-	.use(Webcam, { target: Dashboard });
+new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(Webcam);
 ```
 
 ## API
@@ -92,8 +90,9 @@ A unique identifier for this plugin (`string`, default: `'Webcam'`).
 
 #### `target`
 
-DOM element, CSS selector, or plugin to place the webcam into (`string` or
-`Element`, default: `null`).
+DOM element, CSS selector, or plugin to place the drag and drop area into
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `countdown`
 

docs/user-interfaces/elements/image-editor.mdx

@@ -48,7 +48,7 @@ yarn add @uppy/core @uppy/dashboard @uppy/image-editor
         import { Uppy, Dashboard, ImageEditor } from "{{UPPY_JS_URL}}"
         const uppy = new Uppy()
         uppy.use(Dashboard, { target: '#uppy', inline: true })
-        uppy.use(ImageEditor, { target: Uppy.Dashboard })
+        uppy.use(ImageEditor)
       `}
     </UppyCdnExample>
   </TabItem>
@@ -67,7 +67,7 @@ import '@uppy/image-editor/dist/style.min.css';
 
 new Uppy()
 	.use(Dashboard, { inline: true, target: '#dashboard' })
-	.use(ImageEditor, { target: Dashboard });
+	.use(ImageEditor);
 ```
 
 ## API

docs/user-interfaces/elements/status-bar.mdx

@@ -82,8 +82,9 @@ Use this if you need to add several StatusBar instances.
 
 #### `target`
 
-DOM element, CSS selector, or plugin to mount the Status Bar into (`Element`,
-`string`, `UIPlugin`, default: `'body'`).
+DOM element, CSS selector, or plugin to place the drag and drop area into
+(`string`, `Element`, `Function`, or `UIPlugin`, default:
+[`Dashboard`](/docs/dashboard)).
 
 #### `hideAfterFinish`
 

packages/@uppy/image-editor/README.md

@@ -27,10 +27,7 @@ import ImageEditor from '@uppy/image-editor'
 
 const uppy = new Uppy()
 uppy.use(Dashboard)
-uppy.use(ImageEditor, {
-  target: Dashboard,
-  quality: 0.7,
-})
+uppy.use(ImageEditor, { quality: 0.7 })
 ```
 
 ## Installation