react-droparea alternatives and similar libraries

Based on the "Drag and Drop" category.
Alternatively, view react-droparea alternatives based on common mentions on social networks and blogs.

react-beautiful-dnd

9.8 2.5 react-droparea VS react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
react-dnd

9.6 2.2 react-droparea VS react-dnd

Drag and Drop for React

SurveyJS - JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor

Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.

Promo surveyjs.io

dnd-kit

9.3 5.6 react-droparea VS dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
react-dropzone

9.1 7.7 react-droparea VS react-dropzone

Simple HTML5 drag-drop zone with React.js.
react-draggable

9.0 5.7 react-droparea VS react-draggable

React draggable component
react-dragula

5.8 0.0 react-droparea VS react-dragula

:ok_hand: Drag and drop so simple it hurts
react-dnd-touch-backend

5.0 6.3 react-droparea VS react-dnd-touch-backend

DISCONTINUED. Touch Backend for react-dnd.
react-sortable-pane

4.9 0.0 react-droparea VS react-sortable-pane

:sparkles: A sortable and resizable pane component for React.

Do you think we are missing an alternative of react-droparea or a related project?

Add another 'Drag and Drop' Library

Popular Comparisons

README

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)