@uppy/react
Advanced tools
React component wrappers around Uppy's officially maintained UI plugins.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
import React from 'react'
import Uppy from '@uppy/core'
import { DashboardModal } from '@uppy/react'
const uppy = new Uppy()
class Example extends React.Component {
state = { open: false }
render () {
return (
<DashboardModal
uppy={uppy}
open={this.state.open}
onRequestClose={this.handleClose}
/>
)
}
// ..snip..
}
$ npm install @uppy/react
We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit's CDN: Edgly. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.
Documentation for this plugin can be found on the Uppy website.
2.0.0
Released: 2021-08-24
| Package | Version | Package | Version | |-|-|-|-| | @uppy/angular | 0.2.0 | @uppy/provider-views | 2.0.0 | | @uppy/aws-s3-multipart | 2.0.0 | @uppy/react-native | 0.2.0 | | @uppy/aws-s3 | 2.0.0 | @uppy/react | 2.0.0 | | @uppy/box | 1.0.0 | @uppy/redux-dev-tools | 2.0.0 | | @uppy/companion-client | 2.0.0 | @uppy/robodog | 2.0.0 | | @uppy/companion | 3.0.0 | @uppy/screen-capture | 2.0.0 | | @uppy/core | 2.0.0 | @uppy/status-bar | 2.0.0 | | @uppy/dashboard | 2.0.0 | @uppy/store-default | 2.0.0 | | @uppy/drag-drop | 2.0.0 | @uppy/store-redux | 2.0.0 | | @uppy/drop-target | 1.0.0 | @uppy/svelte | 1.0.0 | | @uppy/dropbox | 2.0.0 | @uppy/thumbnail-generator | 2.0.0 | | @uppy/facebook | 2.0.0 | @uppy/transloadit | 2.0.0 | | @uppy/file-input | 2.0.0 | @uppy/tus | 2.0.0 | | @uppy/form | 2.0.0 | @uppy/unsplash | 1.0.0 | | @uppy/golden-retriever | 2.0.0 | @uppy/url | 2.0.0 | | @uppy/google-drive | 2.0.0 | @uppy/utils | 4.0.0 | | @uppy/image-editor | 1.0.0 | @uppy/vue | 0.3.0 | | @uppy/informer | 2.0.0 | @uppy/webcam | 2.0.0 | | @uppy/instagram | 2.0.0 | @uppy/xhr-upload | 2.0.0 | | @uppy/locales | 2.0.0 | @uppy/zoom | 1.0.0 | | @uppy/onedrive | 2.0.0 | uppy | 2.0.0 | | @uppy/progress-bar | 2.0.0 | - | - |
uppy.legacy.js bundle, but we are not (#2947 / @aduh95)new keyword — please 1always use const uppy = new Uppy() now (#2949 / @arturi)allowMultipleUploads to allowMultipleUploadBatches (#3115 / @arturi)Plugin into BasePlugin and extended UIPlugin (#2944 / @Murderlon).run method (#2957 / @Murderlon)oldHtmlContent from Companion’s send-token option (#2967 / @Murderlon)isTeamDrive from @uppy/google-drive option (#2967 / @Murderlon)resetUploaderReferences option (#2967 / @Murderlon)resume option (#2967 / @Murderlon)lodash dependency (#3036 / @aduh95)serverHeaders in favour of companionHeaders (#2995 / @arturi)logger (#3090 / @bencergazda)getObjectOfFilesPerState in core for plugins (#2961 / @Murderlon)onUnmount in UIPlugin for plugins that require clean up (#3093 / @Murderlon)plugins property (#3045 / @aduh95)onBeforeFileAdded — pass full file object with extension, detected type, meta, size, etc (#2941 / @arturi)sync option from VirtualList & update UIPlugin render @MurderlonArray.prototype.reduce where possible (#3016 / @aduh95)TODO's (#2963 / @Murderlon)createDocumentFragment (#3072 / @arturi)UIPlugin (#3073 / @aduh95)editFile locale usage (#3108 / @Murderlon)showLinkToFileUploadResult: false by default (#2994 / @arturi)croppedCanvasOptions to image editor opts (#3037 / @Murderlon)preact-transition-group (#3055 / @aduh95)new keyword (17f71da67 / @aduh95)socket.io-client version (#3065 / @aduh95)autoRetry option (#2938 / @aduh95)<div> in isDragDropSupported (#3080 / @aduh95)dataURItoBlob (#3080 / @aduh95) (0cccb686f)prettyETA (#3080 / @aduh95)truncateString (#3080 / @aduh95)Array#findIndex (#3080 / @aduh95)canvasToBlob (#3080 / @aduh95)getTimeStamp (#3080 / @aduh95)Array.from insterad of custom utils (#3080 / @aduh95)EventTracker (#3080 / @aduh95)ProgressTimeout (#3080 / @aduh95)RateLimitedQueue (#3080 / @aduh95)MediaDevices API (#2945 / @aduh95)upload-started for every file instead of all at once in xhr-upload (#3005 / @Murderlon)bundle is set (#2933 / @aduh95)@babel/plugin-proposal-nullish-coalescing-operator babel plugin (4bbd3b97b / @aduh95)no-unused-vars linter rule (#3118 / @aduh95) (ec87b232e)package.json imports to be inlined by Babel (#3047 / @aduh95)@babel/polyfill in favor of core-js@3 (#3025 / @aduh95)promisify where possible (#3010 / @aduh95)workflows/cdn.yml to 16.x @Murderlon (35697d18d)docs/companion.md (3632a55c6 / @Murderlon)<script> injected code in companion send-token.js (#3101 / @mifi) (3059d733f)i18nInit (#3122 / @aduh95) (2a93874e3)cheerio-select-tmp @aduh95 (367ec5099 / @aduh95)karma-* @aduh95 (d2a4c9e84 / @aduh95)browserify to v17 @aduh95 (79611cc8d / @aduh95)adm-zip to v0.5 @aduh95 (0e8ab0d6d / @aduh95)typescript version @aduh95 (d6fb14dfb)verdaccio to v5 @aduh95 (135c64a26)tsd to v0.17 @aduh95 (7f6c3fcc4)temp-write to v5 @aduh95 (d01422937)tar to v6 @aduh95 (2a1512288)remark-cli to v9 @aduh95 (def967d5e)pacote to v11 @aduh95 (431f437d1)onchange to v7 @aduh95 (91f056e9e)npm-packlist to v2 @aduh95 (047261ca8)nodemonto v2 @aduh95 (115fa101f)helmet to v4 @aduh95 (7330d21b8)lerna to v4 @aduh95 (469e2e5df)execa and refactor update-contributors script @aduh95 (95a8d871e)cssname to v5 @aduh95 (51af8668f)chalk to v4 @aduh95 (8e2833546)autoprefixer to v10 @aduh95 (0481f5d9b)webpack deps @aduh95 (f251c5705)webdriverio to v7 @aduh95 (96b9e74f7)mkdirp in favor of the built-in fs.mkdir @aduh95 (06d5b3e25)json3 @aduh95 (811acddfa)isomorphic-fetch @aduh95 (d5d34fd12)globby @aduh95 (0964e9a16)fakefile @aduh95 (b7e939d1d)exircist @aduh95 (51f28ab95)rimraf in favor of built-in fs.rm @aduh95 (e4c53bdad)jest to v27 @aduh95 (bbf04e4bd)nock to v13 @aduh95 (38388b175)cuid with nanoid (#3053 / @aduh95)qs-stringify from dependencies (#3077 / @aduh95)package-lock.json (4497557a3 / @aduh95)FAQs
React component wrappers around Uppy's official UI plugins.
The npm package @uppy/react receives a total of 83,033 weekly downloads. As such, @uppy/react popularity was classified as popular.
We found that @uppy/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.