Skip to content

The most complete React Library Component for drag’n’drop files. Image and video previews. File validation. Multilanguage. Server side support.

License

Notifications You must be signed in to change notification settings

dropzone-ui/dropzone-ui-react

Repository files navigation

🚀 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.

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

❤️ it ?, support us by giving a ⭐ 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 👀

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 🍰 Advanced Sample 🔨
Edit Button Edit 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 ⭐ :

👏 Stargazers

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

👏 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