❤
npm
Sign UpSign In

react-dragon

2.0.0 • Public • Published

React Dragon NPM

A very simple drag and drop component. Did I mention it was simple?

Usage

Properties Description
onDrop Required. This is the callback that executes when an item is dropped onto a <Dragon />
allow Directly translates to event.dataTransfer.effectAllowed. Defaults to "all"
className Additional css class names. This can be a string or an object. The value will be injected into the classSet React addon
effect Directly translates to event.dataTransfer.dropEffect. Defaults to "copy"
element What element to use as the wrapper for the dragon. Defaults to "div"
message This is the token that will be passed when a <Dragon /> is dropped onto another <Dragon /> it must be JSON serialization compatible. 
React.createClass({
 
  render() {
    return (
      <Dragon message={ 'something' } onDrop={ this._onDrop } element="p">
        { this.props.children }
      </Dragon>
    )
  },
 
  _onDrop(transmission, receiver) {
    // the transmission is the message from the dragged element
    // the receiver is the message from the dropped element
  }
})

Readme

Keywords

Package Sidebar

Install

npm i react-dragon

Repository

github.com/vigetlabs/react-dragon

Homepage

github.com/vigetlabs/react-dragon

Weekly Downloads

2

Version

2.0.0

License

MIT

Last publish

Collaborators

  • nhunzaker
  • lawson
  • viget
Try on RunKit
Report malware