UNPKG

6.37 kBMarkdownView Raw
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
18Thank you so much for using dropzone-ui/react ❤️ !
19
20Dropzone 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 ⚡.
21In 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
35From 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
39This 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
59npm i @dropzone-ui/react
60```
61
62```sh
63// with yarn
64yarn add @dropzone-ui/react
65```
66
67## API documentation
68
69The complete documentation of every component has been moved to files-ui.com [API page](https://www.files-ui.com/api/dropzone).
70
71However if you are still using dropzone-ui version 6.7.0 or lower, you can find the documentation and demos here:
72
73- ⚡ [Samples](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20?activeTab=readme#Usage-and-examples)
74- 📚 [Docs](https://www.npmjs.com/package/@dropzone-ui/react/v/6.7.20#dropzone-ui-react-components-api).
75
76## Supporters
77
78Special thanks to these amazing people :star: :
79
80### :clap: Stargazers
81
82[![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)
83
84### :clap: Forkers
85
86[![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)
87
88## More Previews
89
90<details>
91 <summary>Image full screen preview 🖼️ </summary>
92 <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>
93
94</details>
95<details>
96 <summary>Video full screen preview 🎞️ </summary>
97<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>
98</details>
99
100<details>
101 <summary>FileCard, FileInputButton and Avatar preview 🎴 </summary>
102<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>
103
104</details>
105
106<details>
107 <summary>DarkMode 🌙 🌞 </summary>
108<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>
109
110<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>
111</details>
112
113## License
114
115This project is licensed under the terms of the
116[MIT license](/LICENSE).
117
118<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>
119
120<br/>
121<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>