doc: fix React examples (#3799)

transloadit · May 31, 2022 · 6a509df · 6a509df
1 parent 588b909
commit 6a509df
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 33 deletions.
diff --git a/website/src/docs/react-dragdrop.md b/website/src/docs/react-dragdrop.md
@@ -44,20 +44,25 @@ The `<DragDrop />` component supports all [DragDrop](/docs/drag-drop/) options a
 import React from 'react'
 import { DragDrop } from '@uppy/react'
 
-  <DragDrop
-    width="100%"
-    height="100%"
-    note="Images up to 200×200px"
-    // assuming `this.uppy` contains an Uppy instance:
-    uppy={this.uppy}
-    locale={{
-      strings: {
-      // Text to show on the droppable area.
-      // `%{browse}` is replaced with a link that opens the system file selection dialog.
-        dropHereOr: 'Drop here or %{browse}',
-        // Used as the label for the link that opens the system file selection dialog.
-        browse: 'browse',
-      },
-    }}
-  />
+export default function MyComponent (props) {
+  const { uppy } = props
+  return  (
+    <DragDrop
+      width="100%"
+      height="100%"
+      note="Images up to 200×200px"
+    // assuming `props.uppy` contains an Uppy instance:
+      uppy={uppy}
+      locale={{
+        strings: {
+          // Text to show on the droppable area.
+          // `%{browse}` is replaced with a link that opens the system file selection dialog.
+          dropHereOr: 'Drop here or %{browse}',
+          // Used as the label for the link that opens the system file selection dialog.
+          browse: 'browse',
+        },
+      }}
+    />
+  )
+}
 ```
diff --git a/website/src/docs/react-fileinput.md b/website/src/docs/react-fileinput.md
@@ -44,10 +44,15 @@ The `<FileInput />` component supports all [FileInput](/docs/file-input/) option
 import React from 'react'
 import { FileInput } from '@uppy/react'
 
-  <FileInput
-    // assuming `this.uppy` contains an Uppy instance:
-    uppy={this.uppy}
-    pretty
-    inputName="files[]"
-  />
+export default function MyComponent (props) {
+  const { uppy } = props
+  return (
+    <FileInput
+    // assuming `props.uppy` contains an Uppy instance:
+      uppy={uppy}
+      pretty
+      inputName="files[]"
+    />
+  )
+}
 ```
diff --git a/website/src/docs/react-progressbar.md b/website/src/docs/react-progressbar.md
@@ -44,11 +44,17 @@ The `<ProgressBar />` component supports all [`@uppy/progress-bar`][] options as
 import React from 'react'
 import { ProgressBar } from '@uppy/react'
 
-  <ProgressBar
-    uppy={uppy}
-    fixed
-    hideAfterFinish
-  />
+export default function MyComponent (props) {
+  const { uppy } = props
+  return (
+    <ProgressBar
+      // assuming `props.uppy` contains an Uppy instance:
+      uppy={uppy}
+      fixed
+      hideAfterFinish
+    />
+  )
+}
 ```
 
 [`@uppy/progress-bar`]: /docs/progress-bar/
diff --git a/website/src/docs/react-statusbar.md b/website/src/docs/react-statusbar.md
@@ -44,12 +44,18 @@ The `<StatusBar />` component supports all [`@uppy/status-bar`][] options as pro
 import React from 'react'
 import { StatusBar } from '@uppy/react'
 
-  <StatusBar
-    uppy={uppy}
-    hideUploadButton
-    hideAfterFinish={false}
-    showProgressDetails
-  />
+export default function MyComponent (props) {
+  const { uppy } = props
+  return (
+    <StatusBar
+      // assuming `props.uppy` contains an Uppy instance:
+      uppy={uppy}
+      hideUploadButton
+      hideAfterFinish={false}
+      showProgressDetails
+    />
+  )
+}
 ```
 
 [`@uppy/status-bar`]: /docs/status-bar/