@dropzone-ui/react
TypeScript icon, indicating that this package has built-in type declarations

7.0.4 • Public • Published

🚀 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

Package Sidebar

Install

npm i @dropzone-ui/react

Weekly Downloads

5,558

Version

7.0.4

License

MIT

Unpacked Size

1.37 MB

Total Files

14

Last publish

Collaborators

  • corrector-yui
  • jin_ssj3