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
File Processing
- Robodog Introduction
- Robodog File Picker
- Image Editor
- Robodog Form
- Robodog Upload
- Robodog Dashboard
- Transloadit
Miscellaneous
React
- Introduction
- Initializing Uppy
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
Introduction
Uppy provides React components for the included UI plugins.
Installation
All React components are provided through the @uppy/react
package.
Install from NPM:
npm install @uppy/react |
CSS
Make sure to also include the necessary CSS files for each Uppy React component you are using. Follow links for individual components docs below for details on that.
Usage
The components can be used with either React or API-compatible alternatives such as Preact.
Instead of adding a UI plugin to an Uppy instance with .use()
, the Uppy instance can be passed into components as an uppy
prop.
All other props are passed as options to the plugin.
import React from 'react' import Uppy from '@uppy/core' import Tus from '@uppy/tus' import { DragDrop } from '@uppy/react' const uppy = new Uppy({ meta: { type: 'avatar' }, restrictions: { maxNumberOfFiles: 1 }, autoProceed: true, }) uppy.use(Tus, { endpoint: '/upload' }) uppy.on('complete', (result) => { const url = result.successful[0].uploadURL store.dispatch({ type: 'SET_USER_AVATAR_URL', payload: { url }, }) }) const AvatarPicker = ({ currentAvatar }) => { return ( <div> <img src={currentAvatar} alt="Current Avatar" /> <DragDrop 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', }, }} /> </div> ) } |
The following plugins are available as React component wrappers:
- <Dashboard /> - renders an inline
@uppy/dashboard
- <DashboardModal /> - renders a
@uppy/dashboard
modal - <DragDrop /> - renders a
@uppy/drag-drop
area - <ProgressBar /> - renders a
@uppy/progress-bar
- <StatusBar /> - renders a
@uppy/status-bar
Caught a mistake or want to contribute to the documentation?
Edit/fork this page directly on Github!