🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Droparea is an HTML5 file drag and drop component for React.js.

Others React

Documentation

Droparea - HTML5 file Drag and Drop component

Instalation

npm install react-droparea

Usage

React = require 'react' {div} = React.DOM Dragarea = React.createFactory(require '../index')  App = React.createClass    _onDrop: (file) ->     console.log file    _onRootDrop: ->     console.log 'root'    render: ->     div null,       Dragarea         onDrop: @_onRootDrop,          for item in [1..10]           Dragarea             className: 'droparea-item'             key: item             onDrop: @_onDrop,               div 'Totally placeholder 1'               div 'Totally placeholder 2'               div 'Totally placeholder 3'  React.render(React.createElement(App), document.getElementById('app')) 

You can fiddle with prepared demo. Clone the repo, npm install and npm start. Then visit localhost:3000.

Options - React props

disableClick: React.PropTypes.bool onDragEnter: React.PropTypes.func onDragEnterStopPropagation: React.PropTypes.bool onDragLeave: React.PropTypes.func onDragLeaveStopPropagation: React.PropTypes.bool onDrop: React.PropTypes.func onDropStopPropagation: React.PropTypes.bool dropEffect: React.PropTypes.string className: React.PropTypes.string activeClassName: React.PropTypes.string multiple: React.PropTypes.bool supportedFormats: React.PropTypes.arrayOf(React.PropTypes.string) 

Credits

This library is inspired by react-dropzone by Param Aggarwal.


You May Also Like