Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
Miscellaneous
React
- Introduction
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
<ProgressBar />
The <ProgressBar />
component wraps the @uppy/progress-bar
plugin.
Installation
Install from NPM:
npm install @uppy/react @uppy/progress-bar @uppy/core |
import { ProgressBar } from '@uppy/react' // Alternatively, you can also use a default import: // import ProgressBar from '@uppy/react/lib/ProgressBar' |
CSS
The ProgressBar
plugin requires the following CSS for styling:
import '@uppy/core/dist/style.css' import '@uppy/progress-bar/dist/style.css' |
Import general Core styles from @uppy/core/dist/style.css
first, then add the Progress Bar styles from @uppy/progress-bar/dist/style.css
. A minified version is also available as style.min.css
at the same path. The way to do import depends on your build system.
Props
The <ProgressBar />
component supports all @uppy/progress-bar
options as props. Additionally, an Uppy instance must be provided in the uppy={}
prop: see Initializing Uppy for details.
import React from 'react' import { ProgressBar } from '@uppy/react' export default function MyComponent (props) { const { uppy } = props return ( <ProgressBar // assuming `props.uppy` contains an Uppy instance: uppy={uppy} fixed hideAfterFinish /> ) } |
Caught a mistake or want to contribute to the documentation?
Edit/fork this page directly on Github!