examples: make React example up-to-date (#5205)

transloadit · May 30, 2024 · c148139 · c148139
1 parent 28767b4
commit c148139
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 132 deletions.
diff --git a/examples/react-example/App.jsx b/examples/react-example/App.jsx
diff --git a/examples/react-example/App.tsx b/examples/react-example/App.tsx
@@ -0,0 +1,49 @@
+/* eslint-disable */
+import React from 'react'
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
+import Webcam from '@uppy/webcam'
+import RemoteSources from '@uppy/remote-sources'
+import { Dashboard, useUppyState } from '@uppy/react'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+import '@uppy/file-input/dist/style.css'
+import '@uppy/progress-bar/dist/style.css'
+
+const metaFields = [
+  { id: 'license', name: 'License', placeholder: 'specify license' },
+]
+
+function createUppy() {
+  return new Uppy({ restrictions: { requiredMetaFields: ['license'] } })
+    .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
+    .use(Webcam)
+    .use(RemoteSources, {
+      companionUrl: 'https://companion.uppy.io',
+    })
+}
+
+export default function App() {
+  // IMPORTANT: passing an initaliser function to useState
+  // to prevent creating a new Uppy instance on every render.
+  // useMemo is a performance hint, not a guarantee.
+  const [uppy] = React.useState(createUppy)
+  // You can access state reactively with useUppyState
+  const fileCount = useUppyState(
+    uppy,
+    (state) => Object.keys(state.files).length,
+  )
+  const totalProgress = useUppyState(uppy, (state) => state.totalProgress)
+  // Also possible to get the state of all plugins.
+  const plugins = useUppyState(uppy, (state) => state.plugins)
+
+  return (
+    <>
+      <p>File count: {fileCount}</p>
+      <p>Total progress: {totalProgress}</p>
+      <Dashboard uppy={uppy} metaFields={metaFields} />
+    </>
+  )
+}
diff --git a/examples/react-example/index.html b/examples/react-example/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="./main.jsx" type="module"></script>
+    <script src="./main.tsx" type="module"></script>
   </body>
 </html>
diff --git a/examples/react-example/main.jsx b/examples/react-example/main.jsx
diff --git a/examples/react-example/main.tsx b/examples/react-example/main.tsx
@@ -0,0 +1,6 @@
+/* eslint-disable */
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.querySelector('#app')).render(<App />)
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
@@ -5,11 +5,8 @@
   "dependencies": {
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
-    "@uppy/drag-drop": "workspace:*",
-    "@uppy/file-input": "workspace:*",
-    "@uppy/google-drive": "workspace:*",
-    "@uppy/progress-bar": "workspace:*",
     "@uppy/react": "workspace:*",
+    "@uppy/remote-sources": "workspace:*",
     "@uppy/tus": "workspace:*",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

diff --git a/examples/react-example/tsconfig.json b/examples/react-example/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "react",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "module": "NodeNext",
+    "outDir": "dist",
+    "sourceMap": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
+  },
+}
diff --git a/yarn.lock b/yarn.lock
@@ -8659,11 +8659,8 @@ __metadata:
   dependencies:
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
-    "@uppy/drag-drop": "workspace:*"
-    "@uppy/file-input": "workspace:*"
-    "@uppy/google-drive": "workspace:*"
-    "@uppy/progress-bar": "workspace:*"
     "@uppy/react": "workspace:*"
+    "@uppy/remote-sources": "workspace:*"
     "@uppy/tus": "workspace:*"
     "@vitejs/plugin-react": "npm:^4.0.0"
     react: "npm:^18.0.0"
@@ -9040,7 +9037,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy/file-input@workspace:*, @uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input":
+"@uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input":
   version: 0.0.0-use.local
   resolution: "@uppy/file-input@workspace:packages/@uppy/file-input"
   dependencies: