A Light and Simple React.js Drag and Drop Library

React Drag and Drop Files

Light and simple reactjs drag and drop library.

Demo

Installation

Install it from npm (using NPM).

npm i --save react-drag-drop-files

Usage

Using react hooks just as simple as:

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const fileTypes = ["JPG", "PNG", "GIF"];

function DragDrop() {
  const [file, setFile] = useState(null);
  const handleChange = file => {
    setFile(file);
  };
  return (
    <FileUploader 
        handleChange={handleChange} 
        name="file" 
        types={fileTypes} 
    />
  );
}

export default DragDrop;

Upcoming…

• [x] Files Validation
• [ ] Adding Multiple Files
• [ ] Testing
• [x] Typesscript Support
• [ ] Contribution Guide
• [ ] Notify With Errors

Download Details:

Author: KarimMokhtar
Download Link: Download The Source Code
Official Website: https://github.com/KarimMokhtar/react-drag-drop-files
License: MIT

#react #javascript #web-development