README

Unlimited React components logologo

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.

demo-drop-zone

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 by props.
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:

Interactive and live demo:

Basic Example Code (click the label or the arrow to collapse)

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;

```

Usage 2 (example with styles and validations)

Interactive and live demo:

Here is an example to customize styles and behaviour:

Styling and validations Example (click the label or the arrow to collapse)

In this example we are telling the drop zone:

Validation

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 personalize the style of the component by giving a color theme and a nice background image got from internet.

themeColor:#5500ff
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.

Code

<!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;

Props (all are optional)

Details

Props.style

themeColor?: Main color for borders and button theme color.
mainTextStyle? andbottonTextStyle?: 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.

Props.cunstomLabels

mainLabel?: a string that is the main label to show on the top of the drop zone.
mainLabel_or?: a string label between the main alabel and the input file button
buttonLabel?: a string label to be shwon on the button.
bottonLabel?: a string label to show on the botton before the list with allowed extentions.

👀️ Custom labels example:

License

This project is licensed under the terms of the MIT license.

Usage no npm install needed!