README
Español 🌎🚀️
Unlimited React Components
React Drop Zone
This is my very first npm package, so if you have any issue or suggestion let me know it on the github section: "issues".
Description
Amazing React drop zone component for loading and validating input files.
Installation
React-drop-zone is available as an npm package.
// with npm
npm i @unlimited-react-components/react-drop-zone
Main Features:
- Input File Button included.
- Free handling: You are free to handle the loaded files because this component returns an array of files (FILE objects) each of them has 2 properties (the own file and an array of errors according to the limits you set).
- Usable: It will fit the parent container. So make sure you give it an appropiate container to it.
- Customizable: you can change the theme color to combine correctly with the rest of the page.
- Localization: English and Spanish versions.
Usage (basic example)
Here is a quick example to get you started, it's all you need:
import "./styles.css";
import { useState } from "react";
import { DropZone } from "@unlimited-react-components/react-drop-zone";
const App = (props) => {
const handleFileSelect = (files) => {
...
};
return (
<div className="App">
...
<DropZone
handleFileSelect={handleFileSelect}
//localization={"es-ES"}
/>
...
</div>
);
};
export default App;
```
Yes, it's really all you need to get started as you can see in this live and interactive demo:
Usage 2 (example with styles and validations)
Here is an example to customize styles and behaviour:
In this example we are telling the drop zone:
- to admit up to 4 files (if you select or drop more, it will take the first 4 files).
- to admit files size up to 50 mb.
- to admit fies with extensions
"json", "exe", "pdf", "png"
- to admit files wich mimetype is included in the list:
"application/json", "image/png"
Styling:
You can personalizethe style of the component by giving a color theme and a nice background image got from internet.
- themeColor:
#ff5733
- backgroundImage:
"https://miro.medium.com/max/670/1*wPqqYFfNreXF4INrNhYkeQ.jpeg"
You can also change the text style ( in this example I am using fonts from Google fonts).
It is necessary to add the corresponding link tag on the index.html
file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Long+Cang&display=swap"
rel="stylesheet"
/>
...
</head>
<body>
...
</body>
</html>
// App.jsx
import "./styles.css";
import { DropZone } from "react-drop-zone-responsive";
import { useState } from "react";
const useLimits = {
extensions: ["json", "pdf", "png"], //admited extensions
mimeType: ["application/json", "application/pdf", "image/png"], //admited mymetypes
maxSize: 50 // MB
};
const useDropZoneStyles = {
themeColor: "#0000ff",
backgroundImage:
"https://miro.medium.com/max/670/1*wPqqYFfNreXF4INrNhYkeQ.jpeg",
mainTextStyle: {
fontFamily: "",
color: "",
fontSize: ""
},
bottonTextStyle: {
fontFamily: "",
color: "",
fontSize: ""
}
//backgroundColor: "#013e62"
};
const numberOfFiles = 4;
const App = (props) => {
...
return (
<div className="App">
...
<DropZone
style={useDropZoneStyles}
amountOfFiles={numberOfFiles}
limits={useLimits}
handleFileSelect={handleFileSelect}
//localization={"es-ES"}
/>
...
</div>
);
};
export default App;
Yes, it's really all you need to get started as you can see in this live and interactive demo:
Props (all are optional)
| Name | Description | Default |
| - | - | - |
| style
| Object that contains the main styles for the component. | {themeColor:#ff6c37
,backgroundImage:"https://www.postman.com/assets/use-cases-by-role.svg"
} |
| limits
| Object that contains the criteria to validate files that we want to load and files we don't. | undefined
: allows any kind of file |
| amountOfFiles
| The max number of files that will be loaded. | 10 |
| handleFileSelect
| The handler function when files are droped or selected. This function receives the list of files after validation. | undefined
|
| localization
| The text label translation in other languages. Supporting now only Englishen-EN
and Spanish es-ES
. | en-EN
: by default |
Details
Props.style
- themeColor?: Main color for borders and button theme color.
- mainTextStyle? and bottonTextStyle?: Styles for labels on the top and botton.
- fontFamily?: string;
- color?: string;
- fontSize?: string | number;
- backgroundImage?: An url to an image on internet to fit the background of the drop zone.
- backgroundColor?: The background color, by default is white.
Props.limits
- extensions?: a string array of extensions
- mimeType?: a string array of mimetypes
- maxSize?: maximun size in megabytes per file.
License
This project is licensed under the terms of the MIT license.