react-dndf

Simple React component package for drag and drop files

Installation

npm install --save react-dndf // for npm
yarn add react-dndf // for yarn

Example

const React = require("react")

const reactDNDF = require("react-dndf")
const DropZone = reactDNDF(React)
class App extends React.Component{
	
	fileChangeHandler = (files) => {
		// Handling selected files
		console.log("files : ", files)
	}
	
	render(){
		return (
			<div>
				<DropZone onFileChange={this.fileChangeHandler}>
					<div style={{ width : "100%", height : "100%", backgroundColor : "gray" }}> 
						Drag And Drop files Here !
					</div>
				</DropZone>		
			</div>
		)
	}
}

Usage

			// img cover
			<DropZone onFileChange={this.fileChangeHandler}>
				<img 
					style={{ width : "100%", height : "100%" }} 
					src={yourImgSrc}
				/>
			</DropZone>		
			
			// div cover
			<DropZone onFileChange={this.fileChangeHandler}>
				<div className="myCoverClassName">{yourText}</div>
			</DropZone>		
			

Props

Name	Type	arguments	Description
onFileChange	callback func	files	Callback fired when a file is dragged and dropped
accept	text		HTML input tag accept Attribute
wrapperClassName	text		className for DropZone wrapper
wrapperStyle	object		inline style for DropZone wrapper

Contributing

Contributions, questions and pull requests are all welcomed.

License

Copyright (c) 2019. Bpeak Licensed with The MIT License (MIT)