@unlimited-react-components/react-drop-zone NPM

Español 🚀️

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 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:

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:

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"

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.

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

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 English`en-EN` and Spanish `es-ES`.	`en-EN`: by default
`inputButton`	Boolean value that specify whether to include input file butoon or not.	`undefined`: by default
`multiple`	Boolean value that, if present or has thurty value, makes the inpput button to filter the files according to the`limits.extensions` and `limits.mimetype` props.	`undefined`: by default
`cutomLabels`	Object wich labels to show in the dropzone.	`undefined`: by default

Details

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.

extensions?: a string array of extensions
mimeType?: a string array of mimetypes
maxSize?: maximun size in megabytes per file.

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: