HTML5 file Drag and Drop component for React

HTML5 file Drag and Drop component for React

Drag and Drop library for React,HTML5 file Drag and Drop component.

Droparea - HTML5 file Drag and Drop component


npm install react-droparea


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,
        onDrop: @_onRootDrop,

        for item in [1..10]
            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)


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

Github Repository