A Light and simple reactjs drag and drop library

by React

React Drag and drop files

Light React Drag & Drop files and images library styled by styled-components.

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 
        file={file} 
        handleChange={handleChange} 
        name="file" 
        types={fileTypes} 
    />
  );
}

export default DragDrop;

Upcoming...

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

GitHub

https://github.com/KarimMokhtar/react-drag-drop-files