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
<StatusBar />
The <StatusBar />
component wraps the @uppy/status-bar
plugin.
Installation
Install from NPM:
npm install @uppy/react @uppy/status-bar @uppy/core |
import { StatusBar } from '@uppy/react' // Alternatively, you can also use a default import: // import StatusBar from '@uppy/react/lib/StatusBar' |
CSS
The StatusBar
component requires the following CSS for styling:
import '@uppy/core/dist/style.css' import '@uppy/status-bar/dist/style.css' |
Import general Core styles from @uppy/core/dist/style.css
first, then add the Status Bar styles from @uppy/status-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 <StatusBar />
component supports all @uppy/status-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 { StatusBar } from '@uppy/react' export default function MyComponent (props) { const { uppy } = props return ( <StatusBar // assuming `props.uppy` contains an Uppy instance: uppy={uppy} hideUploadButton hideAfterFinish={false} showProgressDetails /> ) } |
Caught a mistake or want to contribute to the documentation?
Edit/fork this page directly on Github!