@uppy/react: add useUppyState (#4711)

e2e/clients/react/App.jsx

@@ -2,7 +2,7 @@
 import Uppy from '@uppy/core'
 /* eslint-disable-next-line no-unused-vars */
 import React, { useState } from 'react'
-import { Dashboard, DashboardModal, DragDrop } from '@uppy/react'
+import { Dashboard, DashboardModal, DragDrop, useUppyState } from '@uppy/react'
 import ThumbnailGenerator from '@uppy/thumbnail-generator'
 import RemoteSources from '@uppy/remote-sources'
 
@@ -10,24 +10,33 @@ import '@uppy/core/dist/style.css'
 import '@uppy/dashboard/dist/style.css'
 import '@uppy/drag-drop/dist/style.css'
 
+const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, {
+  companionUrl: 'http://companion.uppy.io',
+  sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
+})
+const uppyModal = new Uppy({ id: 'modal' })
+const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
+
 export default function App () {
-  const RemoteSourcesOptions = {
-    companionUrl: 'http://companion.uppy.io',
-    sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
-  }
-  const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, { ...RemoteSourcesOptions })
-  const uppyModal = new Uppy({ id: 'modal' })
-  const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
   const [open, setOpen] = useState(false)
+  const files = useUppyState(uppyDashboard, (state) => state.files)
 
   // drag-drop has no visual output so we test it via the uppy instance
   window.uppy = uppyDragDrop
 
   return (
-    <div style={{ maxWidth: '30em', margin: '5em 0', display: 'grid', gridGap: '2em' }}>
+    <div
+      style={{
+        maxWidth: '30em',
+        margin: '5em 0',
+        display: 'grid',
+        gridGap: '2em',
+      }}
+    >
       <button type="button" id="open" onClick={() => setOpen(!open)}>
         Open Modal
       </button>
+      <p>Dashboard file count: {Object.keys(files).length}</p>
 
       <Dashboard id="dashboard" uppy={uppyDashboard} />
       <DashboardModal id="modal" open={open} uppy={uppyModal} />

e2e/clients/react/index.jsx

@@ -1,4 +1,6 @@
 /* eslint-disable react/react-in-jsx-scope */
+// eslint-disable-next-line no-unused-vars
+import React from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 

e2e/package.json

@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@parcel/transformer-vue": "^2.9.3",
+    "@types/react": "^18.2.23",
     "cypress": "^13.0.0",
     "cypress-terminal-report": "^5.0.0",
     "deep-freeze": "^0.0.1",

package.json

@@ -98,6 +98,7 @@
     "postcss-logical": "^5.0.0",
     "pre-commit": "^1.2.2",
     "prettier": "^3.0.3",
+    "react": "^18.0.0",
     "remark-cli": "^11.0.0",
     "resolve": "^1.17.0",
     "sass": "^1.29.0",
@@ -167,7 +168,6 @@
   },
   "resolutions": {
     "@types/eslint@^7.2.13": "^8.2.0",
-    "@types/react": "^17",
     "@types/webpack-dev-server": "^4",
     "p-queue": "patch:p-queue@npm%3A7.4.1#./.yarn/patches/p-queue-npm-7.4.1-e0cf0a6f17.patch",
     "pre-commit": "patch:pre-commit@npm:1.2.2#.yarn/patches/pre-commit-npm-1.2.2-f30af83877.patch",

packages/@uppy/react/src/index.js

@@ -5,3 +5,4 @@ export { default as ProgressBar } from './ProgressBar.js'
 export { default as StatusBar } from './StatusBar.js'
 export { default as FileInput } from './FileInput.js'
 export { default as useUppy } from './useUppy.js'
+export { default as useUppyState } from './useUppyState.js'

packages/@uppy/react/src/useUppy.js

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react'
 import { Uppy as UppyCore } from '@uppy/core'
 
+// TODO: remove in the next major
+
 /**
  * @deprecated Initialize Uppy outside of the component.
  */

packages/@uppy/react/src/useUppyState.d.ts

@@ -0,0 +1,13 @@
+import type { Uppy, State } from '@uppy/core'
+
+type ValueOf<T> = T[keyof T]
+
+/**
+ * Subscribe to a part of Uppy's state and only re-render when that part changes.
+ */
+declare function useUppyState(
+  uppy: Uppy,
+  selector: (state: State) => ValueOf<State>,
+): ValueOf<State>
+
+export default useUppyState

packages/@uppy/react/src/useUppyState.js

@@ -0,0 +1,14 @@
+import { useSyncExternalStore, useMemo, useCallback } from 'react'
+
+export default function useUppyState(uppy, selector) {
+  const subscribe = useMemo(
+    () => uppy.store.subscribe.bind(uppy.store),
+    [uppy.store],
+  )
+  const getSnapshot = useCallback(
+    () => selector(uppy.store.getState()),
+    [uppy.store, selector],
+  )
+
+  return useSyncExternalStore(subscribe, getSnapshot)
+}

yarn.lock

@@ -8315,14 +8315,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^17":
-  version: 17.0.49
-  resolution: "@types/react@npm:17.0.49"
+"@types/react@npm:^18.0.0, @types/react@npm:^18.0.8, @types/react@npm:^18.2.23":
+  version: 18.2.23
+  resolution: "@types/react@npm:18.2.23"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: e2e8001bb16fdf52dc92dbc2f64c8e49b1c6ab5d5da4725c0f27e3d925939e42b835554fecc306ca6b0951801eb784288b63c924bd703834662bbaccf89cb68a
+  checksum: efb9d1ed1940c0e7ba08a21ffba5e266d8dbbb8fe618cfb97bc902dfc96385fdd8189e3f7f64b4aa13134f8e61947d60560deb23be151253c3a97b0d070897ca
   languageName: node
   linkType: hard
 
@@ -8732,6 +8732,7 @@ __metadata:
     postcss-logical: ^5.0.0
     pre-commit: ^1.2.2
     prettier: ^3.0.3
+    react: ^18.0.0
     remark-cli: ^11.0.0
     resolve: ^1.17.0
     sass: ^1.29.0
@@ -14370,6 +14371,7 @@ __metadata:
   resolution: "e2e@workspace:e2e"
   dependencies:
     "@parcel/transformer-vue": ^2.9.3
+    "@types/react": ^18.2.23
     "@uppy/audio": "workspace:^"
     "@uppy/aws-s3": "workspace:^"
     "@uppy/aws-s3-multipart": "workspace:^"