@uppy/react: remove `react:` prefix from `id` & allow `id` as a prop (#5228)

packages/@uppy/react/src/Dashboard.ts

@@ -51,9 +51,9 @@ class Dashboard<M extends Meta, B extends Body> extends Component<
 
   installPlugin(): void {
     const { uppy, ...options } = {
-      id: 'react:Dashboard',
-      inline: true,
+      id: 'Dashboard',
       ...this.props,
+      inline: true,
       target: this.container,
     }
     uppy.use(DashboardPlugin<M, B>, options)

packages/@uppy/react/src/DashboardModal.ts

@@ -73,8 +73,8 @@ class DashboardModal<M extends Meta, B extends Body> extends Component<
       ...rest
     } = this.props
     const options = {
+      id: 'DashboardModal',
       ...rest,
-      id: 'react:DashboardModal',
       inline: false,
       target,
       open,

packages/@uppy/react/src/DragDrop.ts

@@ -43,9 +43,9 @@ class DragDrop<M extends Meta, B extends Body> extends Component<
   }
 
   installPlugin(): void {
-    const { uppy, locale, inputName, width, height, note } = this.props
+    const { uppy, locale, inputName, width, height, note, id } = this.props
     const options = {
-      id: 'react:DragDrop',
+      id: id || 'DragDrop',
       locale,
       inputName,
       width,

packages/@uppy/react/src/FileInput.ts

@@ -1,10 +1,11 @@
 import { createElement as h, Component } from 'react'
-import type { UnknownPlugin, Uppy } from '@uppy/core'
+import type { UIPluginOptions, UnknownPlugin, Uppy } from '@uppy/core'
 import FileInputPlugin from '@uppy/file-input'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 import type { Locale } from '@uppy/utils/lib/Translator'
 
-interface FileInputProps<M extends Meta, B extends Body> {
+interface FileInputProps<M extends Meta, B extends Body>
+  extends UIPluginOptions {
   uppy: Uppy<M, B>
   locale?: Locale
   pretty?: boolean
@@ -47,9 +48,9 @@ class FileInput<M extends Meta, B extends Body> extends Component<
   }
 
   installPlugin(): void {
-    const { uppy, locale, pretty, inputName } = this.props
+    const { uppy, locale, pretty, inputName, id } = this.props
     const options = {
-      id: 'react:FileInput',
+      id: id || 'FileInput',
       locale,
       pretty,
       inputName,

packages/@uppy/react/src/ProgressBar.ts

@@ -42,9 +42,9 @@ class ProgressBar<M extends Meta, B extends Body> extends Component<
   }
 
   installPlugin(): void {
-    const { uppy, fixed, hideAfterFinish } = this.props
+    const { uppy, fixed, hideAfterFinish, id } = this.props
     const options = {
-      id: 'react:ProgressBar',
+      id: id || 'ProgressBar',
       fixed,
       hideAfterFinish,
       target: this.container,

packages/@uppy/react/src/StatusBar.ts

@@ -52,9 +52,10 @@ class StatusBar<M extends Meta, B extends Body> extends Component<
       showProgressDetails,
       hideAfterFinish,
       doneButtonHandler,
+      id,
     } = this.props
     const options = {
-      id: 'react:StatusBar',
+      id: id || 'StatusBar',
       hideUploadButton,
       hideRetryButton,
       hidePauseResumeButton,