README
React Drop Zone Responsive
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.
Main Features:
- Basic input button is included.
- Free handling: You are free to handle the loaded files because this component returns an array of files 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 git it an appropiate container.
- Customizable: you can change the theme color to combine correctly with the rest of the page.
- Localization: English and Spanish versions.
- File reading:
(csv, txt, json, xlsx)
: *soon*in future releases*
Installation
React-drop-zone-responsive is available as an npm package.
// with npm
npm i react-drop-zone-responsive
Usage (example)
Here is an example to get you started, it's all you need:
In this exaple we are telling the drop zone:
- to admit up to 4 files (if you pick 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 style the component giving the 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 style the text ( 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
};
//font family got from google fonts:
//https://fonts.google.com/specimen/Indie+Flower?preview.text_type=custom&sidebar.open=true&selection.family=Indie+Flower
const useDropZoneStyles = {
//themeColor: "teal",
//theme color: could also be "rgb: rgb(255,254,45)", "hex: #0000ff"
// themeColor: "#0000ff",
themeColor: "RgB(200,45,28)",
backgroundImage:
"https://miro.medium.com/max/670/1*wPqqYFfNreXF4INrNhYkeQ.jpeg",
//"https://programacion.net/files/article/20170331010346_json.png",
mainTextStyle: {
fontFamily: "",
color: "",
fontSize: ""
},
bottonTextStyle: {
fontFamily: "",
color: "",
fontSize: ""
}
//backgroundColor: "#013e62"
};
const numberOfFiles = 4;
const App = (props) => {
const [fileListCheck, setFileListCheck] = useState([]);
const [fileListError, setFileListError] = useState([]);
const handleFileSelect = (files) => {
let filesCheck = [];
let filesError = [];
files.forEach((f) => {
if (f.errors.length > 0) {
filesError.push(f.file);
f.errors.forEach((element, index) => {
console.log(`${f.file.name}: Error ${index}: ${element}`);
});
} else {
filesCheck.push(f.file);
}
});
setFileListCheck(filesCheck);
setFileListError(filesError);
};
return (
<div className="App">
<h1 style={useDropZoneStyles.mainTextStyle}>
Wellcome to React Drop Zone Responsive on CodeSandbox
</h1>
<h2>Start editing to see some magic happen!</h2>
<p>Component in construction BTW</p>
<DropZone
style={useDropZoneStyles}
amountOfFiles={numberOfFiles}
limits={useLimits}
handleFileSelect={handleFileSelect}
//localization={"es-ES"}
/>
<h3>{`List of files without errors (${fileListCheck.length})`}</h3>
<li>
{fileListCheck.map((f, index) => (
<ul key={index}>{f.name}</ul>
))}
</li>
<h3>{`List of files with errors (${fileListError.length})`}</h3>
<li>
{fileListError.map((f, index) => (
<ul key={index}>{f.name}</ul>
))}
</li>
<h2>Also check the console to see the errors, if any</h2>
</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 number of files to consider. | 10 |
| handleFileSelect
| The handler function when files are droped or selected. This function receives the list of files after validation. | undefined
|
| localization
| The corresponding translation for languages.
Supporting now English en-EN
and Spanish es-ES
. | en-EN
: by default |
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.