https://github.com/avocode/react-droparea

Drag and Drop library for React
https://github.com/avocode/react-droparea

Last synced: about 2 months ago
JSON representation

Drag and Drop library for React

• Host: GitHub
• URL: https://github.com/avocode/react-droparea
• Owner: avocode
• License: mit
• Created: 2015-05-25T22:09:13.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-12-06T21:23:38.000Z (about 7 years ago)
• Last Synced: 2024-11-09T22:03:10.211Z (2 months ago)
• Language: CoffeeScript
• Size: 74.2 KB
• Stars: 93
• Watchers: 4
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-droparea - Drag and Drop library for React. (Demos / Form Components)
• awesome-react-components - react-droparea - Drag and Drop library for React. (UI Components / Form Components)

README

        
# Droparea - HTML5 file Drag and Drop component

![](https://upx.cz/286)

## 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](https://github.com/paramaggarwal/react-dropzone) by Param Aggarwal.