1 | :rocket: [Spanish README](./README_ES.md)
|
2 |
|
3 | # Dropzone UI
|
4 |
|
5 | [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE)
|
6 | [![npm latest package](https://img.shields.io/npm/v/@dropzone-ui/react.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@dropzone-ui/react)
|
7 | [![Rate on Openbase](https://badges.openbase.com/js/rating/@dropzone-ui/react.svg)](https://openbase.com/js/@dropzone-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
|
8 | [![kandi X-Ray](https://kandi.openweaver.com/badges/xray.svg)](https://kandi.openweaver.com/typescript/dropzone-ui/dropzone-ui-react)
|
9 | [![Node.js CI](https://github.com/dropzone-ui/react-dropzone/actions/workflows/node.js.yml/badge.svg)](https://github.com/dropzone-ui/dropzone-ui-react)
|
10 | [![Build Status](https://app.travis-ci.com/dropzone-ui/dropzone-ui-react.svg?branch=master)](https://app.travis-ci.com/dropzone-ui/dropzone-ui-react)
|
11 | [![Known Vulnerabilities](https://snyk.io/test/github/dropzone-ui/react/badge.svg)](https://snyk.io/test/github/dropzone-ui/react)
|
12 | [![Package Quality](https://packagequality.com/shield/dropzone-ui.svg)](https://packagequality.com/#?package=dropzone-ui)
|
13 | [![install size](https://packagephobia.com/badge?p=@dropzone-ui/react)](https://packagephobia.com/result?p=@dropzone-ui/react)
|
14 | [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/dropzone-ui/react.svg)](http://isitmaintained.com/project/dropzone-ui/react)
|
15 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
|
16 | [![GitHub Repo stars](https://img.shields.io/github/stars/dropzone-ui/react?label=Star%20me%20please%20:D&style=social)](https://github.com/dropzone-ui/react)
|
17 |
|
18 | Thank you so much for using dropzone-ui/react ❤️ !
|
19 |
|
20 | 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 ⚡.
|
21 | 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.
|
22 |
|
23 | :zap: Live demos and full documentation : [files-ui.com](https://files-ui.vercel.app)
|
24 |
|
25 | :heart: it ?, support us by giving a :star: on :octocat: [Github](https://github.com/files-ui/files-ui-react) :D
|
26 |
|
27 | <p align="center">
|
28 | <a href="https://www.files-ui.com">
|
29 | <img src="https://user-images.githubusercontent.com/43678736/225168231-35d7dc8d-f89e-43a1-8ce9-441bd59a74df.png" align="center">
|
30 | </a>
|
31 | </p>
|
32 |
|
33 | ## Important
|
34 |
|
35 | From now on [@files-ui/react](https://www.npmjs.com/package/@files-ui/react) is the only dependency. Check out the changelog file to know what's new.
|
36 |
|
37 | ## Sample result:
|
38 |
|
39 | This is a small part of what you can find on files-ui :eyes:
|
40 |
|
41 | <p align="center">
|
42 | <a href="https://www.files-ui.com">
|
43 | <img src="https://user-images.githubusercontent.com/43678736/228052494-99d970c0-1eb7-42c6-b22c-8c2295b8dc4a.gif" width="80%" alt="fui-logo"/>
|
44 | </a>
|
45 | </p>
|
46 |
|
47 | - More previews [here](#more-previews).
|
48 |
|
49 | ## Requirement
|
50 |
|
51 | `@dropzone-ui/react` is based on [React Hooks](https://reactjs.org/docs/hooks-intro.html). It requires `react v16.8+`.
|
52 |
|
53 | ## Installation
|
54 |
|
55 | @dropzone-ui/react is available as an [npm package](https://www.npmjs.com/package/@dropzone-ui/react).
|
56 |
|
57 | ```sh
|
58 | // with npm
|
59 | npm i @dropzone-ui/react
|
60 | ```
|
61 |
|
62 | ```sh
|
63 | // with yarn
|
64 | yarn add @dropzone-ui/react
|
65 | ```
|
66 |
|
67 | ## Usage and examples
|
68 |
|
69 | Here is a quick example to get you started, **it's all you need**:
|
70 |
|
71 | ```jsx
|
72 | import * as React from "react";
|
73 | import ReactDOM from "react-dom";
|
74 | import { Dropzone, FileMosaic } from "@dropzone-ui/react";
|
75 |
|
76 | function App() {
|
77 | const [files, setFiles] = React.useState([]);
|
78 | const updateFiles = (incommingFiles) => {
|
79 | setFiles(incommingFiles);
|
80 | };
|
81 | return (
|
82 | <Dropzone onChange={updateFiles} value={files}>
|
83 | {files.map((file) => (
|
84 | <FileMosaic {...file} preview />
|
85 | ))}
|
86 | </Dropzone>
|
87 | );
|
88 | }
|
89 |
|
90 | ReactDOM.render(<App />, document.querySelector("#app"));
|
91 | ```
|
92 |
|
93 | Yes, it's really all you need to get started as you can see in these live and interactive demos:
|
94 |
|
95 | | Basic Sample :cake: | Advanced Sample :hammer: |
|
96 | | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
97 | | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-demo-js-blssi1?file=/src/App.js) | [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/advanced-demo-js-6euo8j?file=/src/App.js) |
|
98 |
|
99 | ## API documentation
|
100 |
|
101 | The complete documentation of every component has been moved to files-ui.com [API page](https://www.files-ui.com/api/dropzone).
|
102 |
|
103 | However if you are still using dropzone-ui version 6.7.0 or lower, you can find the documentation and demos here:
|
104 |
|
105 | - ⚡ [Samples](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20?activeTab=readme#Usage-and-examples)
|
106 | - 📚 [Docs](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20#dropzone-ui-react-components-api).
|
107 |
|
108 | ## Supporters
|
109 |
|
110 | Special thanks to these amazing people :star: :
|
111 |
|
112 | ### :clap: Stargazers
|
113 |
|
114 | [![Stargazers repo roster for @dropzone-ui/dropzone-ui-react](https://reporoster.com/stars/dropzone-ui/dropzone-ui-react)](https://github.com/dropzone-ui/dropzone-ui-react/stargazers)
|
115 |
|
116 | ### :clap: Forkers
|
117 |
|
118 | [![Forkers repo roster for @dropzone-ui/dropzone-ui-react](https://reporoster.com/forks/dropzone-ui/dropzone-ui-react)](https://github.com/dropzone-ui/dropzone-ui-react/network/members)
|
119 |
|
120 | ## More Previews
|
121 |
|
122 | <details>
|
123 | <summary>Image full screen preview 🖼️ </summary>
|
124 | <p align="center"><img src="https://user-images.githubusercontent.com/43678736/228066199-fb7a5bd3-9c7e-4f72-b0ef-7f11d236d38e.png" alt="Image full screen preview" width="100%"/></p>
|
125 |
|
126 | </details>
|
127 | <details>
|
128 | <summary>Video full screen preview 🎞️ </summary>
|
129 | <p align="center"><img src="https://user-images.githubusercontent.com/43678736/228066195-62063300-21e0-48fd-80d8-31b566562fde.png" alt="Video full screen preview" width="100%"/></p>
|
130 | </details>
|
131 |
|
132 | <details>
|
133 | <summary>FileCard, FileInputButton and Avatar preview 🎴 </summary>
|
134 | <p align="center"><img src="https://user-images.githubusercontent.com/43678736/228063876-5b6d00fe-f0ba-453f-a7ce-c44ba7444417.png" alt="Video full screen preview" width="100%"/></p>
|
135 |
|
136 | </details>
|
137 |
|
138 | <details>
|
139 | <summary>DarkMode 🌙 🌞 </summary>
|
140 | <p align="center"><img src="https://user-images.githubusercontent.com/43678736/228063883-569ca6f1-6959-45bc-9882-2c447162a00f.png" alt="darkmode 1 preview" width="100%"/></p>
|
141 |
|
142 | <p align="center"><img src="https://user-images.githubusercontent.com/43678736/228066720-e0bb96ac-3c00-4aa6-80b9-e0b4d0c5f947.png" alt="darkmode 2 preview" width="100%"/></p>
|
143 | </details>
|
144 |
|
145 | ## License
|
146 |
|
147 | This project is licensed under the terms of the
|
148 | [MIT license](/LICENSE).
|
149 |
|
150 | <p align="center"><a href="https://github.com/dropzone-ui/react-dropzone#"><img src="http://randojs.com/images/barsSmallTransparentBackground.gif" alt="Animated footer bars" width="100%"/></a></p>
|
151 |
|
152 | <br/>
|
153 | <p align="center"><a href="https://github.com/dropzone-ui/react-dropzone#readme"><img src="http://randojs.com/images/backToTopButtonTransparentBackground.png" alt="Back to top" height="28"/></a></p>
|