@uppy/react: remove react: prefix from id & allow id as a prop

[Murderlon]

Fixes #5218

Also removes the confusing react: prefix, which serves no purpose and is confusing coming from the vanilla version.

[github-actions]

Diff output files

diff --git a/packages/@uppy/react/lib/Dashboard.js b/packages/@uppy/react/lib/Dashboard.js
index 04517e8..df232eb 100644
--- a/packages/@uppy/react/lib/Dashboard.js
+++ b/packages/@uppy/react/lib/Dashboard.js
@@ -29,9 +29,9 @@ class Dashboard extends Component {
       uppy,
       ...options
     } = {
-      id: "react:Dashboard",
-      inline: true,
+      id: "Dashboard",
       ...this.props,
+      inline: true,
       target: this.container,
     };
     uppy.use(DashboardPlugin, options);
diff --git a/packages/@uppy/react/lib/DashboardModal.js b/packages/@uppy/react/lib/DashboardModal.js
index f335860..3bd2812 100644
--- a/packages/@uppy/react/lib/DashboardModal.js
+++ b/packages/@uppy/react/lib/DashboardModal.js
@@ -44,8 +44,8 @@ class DashboardModal extends Component {
       ...rest
     } = this.props;
     const options = {
+      id: "DashboardModal",
       ...rest,
-      id: "react:DashboardModal",
       inline: false,
       target,
       open,
diff --git a/packages/@uppy/react/lib/DragDrop.js b/packages/@uppy/react/lib/DragDrop.js
index 4bfa1a2..8519fc3 100644
--- a/packages/@uppy/react/lib/DragDrop.js
+++ b/packages/@uppy/react/lib/DragDrop.js
@@ -32,9 +32,10 @@ class DragDrop extends Component {
       width,
       height,
       note,
+      id,
     } = this.props;
     const options = {
-      id: "react:DragDrop",
+      id: id || "DragDrop",
       locale,
       inputName,
       width,
diff --git a/packages/@uppy/react/lib/FileInput.js b/packages/@uppy/react/lib/FileInput.js
index 3451e6a..5cb6e66 100644
--- a/packages/@uppy/react/lib/FileInput.js
+++ b/packages/@uppy/react/lib/FileInput.js
@@ -19,9 +19,10 @@ class FileInput extends Component {
       locale,
       pretty,
       inputName,
+      id,
     } = this.props;
     const options = {
-      id: "react:FileInput",
+      id: id || "FileInput",
       locale,
       pretty,
       inputName,
diff --git a/packages/@uppy/react/lib/ProgressBar.js b/packages/@uppy/react/lib/ProgressBar.js
index 3d0e39d..6d45962 100644
--- a/packages/@uppy/react/lib/ProgressBar.js
+++ b/packages/@uppy/react/lib/ProgressBar.js
@@ -29,9 +29,10 @@ class ProgressBar extends Component {
       uppy,
       fixed,
       hideAfterFinish,
+      id,
     } = this.props;
     const options = {
-      id: "react:ProgressBar",
+      id: id || "ProgressBar",
       fixed,
       hideAfterFinish,
       target: this.container,
diff --git a/packages/@uppy/react/lib/StatusBar.js b/packages/@uppy/react/lib/StatusBar.js
index cd96dc3..306dec4 100644
--- a/packages/@uppy/react/lib/StatusBar.js
+++ b/packages/@uppy/react/lib/StatusBar.js
@@ -34,9 +34,10 @@ class StatusBar extends Component {
       showProgressDetails,
       hideAfterFinish,
       doneButtonHandler,
+      id,
     } = this.props;
     const options = {
-      id: "react:StatusBar",
+      id: id || "StatusBar",
       hideUploadButton,
       hideRetryButton,
       hidePauseResumeButton,

[aduh95]

I'd be surprised if that prefix really served no purpose, it was introduced in #776, unfortunately there's no explanation on that PR

[Murderlon]

I'd be very surprised if it did. It's probably from falsely assuming that Dashboard already exists, as we load the vanilla version inside the React component, but that doesn't matter. Only one plugin is registered.

[aduh95]

This removes the possibility to override inline via props, is it on purpose?

[Murderlon]

It's on purpose and documented in #5206