@dropzone-ui/react

中文文档
7.0.4发布于 2023/04/24MITTypeScriptESM + CJS近 30 天下载 1.3万

The best and most complete React library for managing file uploads. Multilanguage support. Server side support. Material design styles. Code generator on webpage.

原始使用文档
文档目录11 节
  1. Important
  2. Sample result:
  3. Requirement
  4. Installation
  5. Usage and examples
  6. API documentation
  7. Supporters
  8. :clap: Stargazers
  9. :clap: Forkers
  10. More Previews
  11. License

:rocket: Spanish README

Dropzone UI

license npm latest package Rate on Openbase kandi X-Ray Node.js CI Build Status Known Vulnerabilities Package Quality install size Average time to resolve an issue PRs Welcome GitHub Repo stars

Thank you so much for using dropzone-ui/react ❤️ !

Dropzone UI has grown very fast and has exceeded its original scope. That's why we find reasonable to rebrand it and create a new package taking the best of this one and adding more features and new components. This new package is here and its name is Files UI ⚡. In an very near future we'll stop giving support to dropzone-ui, so we enforce you to upgrade to this new package. In the meanwhile this package will become a wrapper for files-ui.

:zap: Live demos and full documentation : files-ui.com

:heart: it ?, support us by giving a :star: on :octocat: Github :D

Important

From now on @files-ui/react is the only dependency. Check out the changelog file to know what's new.

Sample result:

This is a small part of what you can find on files-ui :eyes:

fui-logo

  • More previews here.

Requirement

@dropzone-ui/react is based on React Hooks. It requires react v16.8+.

Installation

@dropzone-ui/react is available as an npm package.

// with npm
npm i @dropzone-ui/react
// with yarn
yarn add @dropzone-ui/react

Usage and examples

Here is a quick example to get you started, it's all you need:

import * as React from "react";
import ReactDOM from "react-dom";
import { Dropzone, FileMosaic } from "@dropzone-ui/react";

function App() {
  const [files, setFiles] = React.useState([]);
  const updateFiles = (incommingFiles) => {
    setFiles(incommingFiles);
  };
  return (
    <Dropzone onChange={updateFiles} value={files}>
      {files.map((file) => (
        <FileMosaic {...file} preview />
      ))}
    </Dropzone>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Yes, it's really all you need to get started as you can see in these live and interactive demos:

Basic Sample :cake:Advanced Sample :hammer:
Edit ButtonEdit Button

API documentation

The complete documentation of every component has been moved to files-ui.com API page.

However if you are still using dropzone-ui version 6.7.0 or lower, you can find the documentation and demos here:

Supporters

Special thanks to these amazing people :star: :

:clap: Stargazers

Stargazers repo roster for @dropzone-ui/dropzone-ui-react

:clap: Forkers

Forkers repo roster for @dropzone-ui/dropzone-ui-react

More Previews

Image full screen preview 🖼️

Image full screen preview

Video full screen preview 🎞️

Video full screen preview

FileCard, FileInputButton and Avatar preview 🎴

Video full screen preview

DarkMode 🌙 🌞

darkmode 1 preview

darkmode 2 preview

License

This project is licensed under the terms of the MIT license.

Animated footer bars


Back to top

版本与发布记录

@dropzone-ui/react 共发布 54 个版本,首次发布于 2021/10/03;过去 12 个月发布了 0 个版本。

版本发布日期距今
7.0.4latest2023/04/243 年前
7.0.22023/03/293 年前
7.0.02023/03/293 年前
6.7.202022/10/104 年前
6.7.182022/10/104 年前
6.7.162022/10/104 年前

关于 @dropzone-ui/react 的常见问题

@dropzone-ui/react 是什么?

The best and most complete React library for managing file uploads. Multilanguage support. Server side support. Material design styles. Code generator on webpage.

如何安装 @dropzone-ui/react?

在项目目录运行 npm install @dropzone-ui/react,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:react(^17.0.2 || ^18.0.0)、react-dom(^17.0.2 || ^18.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@dropzone-ui/react 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@dropzone-ui/react 支持 ESM 还是 CommonJS?

同时提供 ES Module 与 CommonJS 入口,import 和 require() 都可以使用,打包工具会自动选择合适的版本。

@dropzone-ui/react 可以商用吗?

@dropzone-ui/react 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@dropzone-ui/react 的下载量有多少?

根据 npm 官方下载统计,@dropzone-ui/react 在 2026/10/13 – 2026/11/11 这 30 天内被下载 13,235 次,日均约 441 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@dropzone-ui/react 还在维护吗?

最新版本 7.0.4 发布于 2023/04/24(3 年前);至今共发布 54 个版本,其中过去 12 个月发布了 0 个;首次发布于 2021/10/03。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。