Drag and Drop library for React
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


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.