expose component drag and drop events as a stream
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
README.md
index.js
package.json

README.md

Reactive Announce Draggable

Build Status npm

A simple react-announce extension that helps in consolidating the drag and drop events.

Installation

npm i react-announce-draggable --save

Example Usage

Auto fires three types of custom events — DRAG_START, DRAG_OVER and DROP, on the component stream.

import {draggable, droppable, consolidate}  from 'react-announce-draggable'
import {asStream} from 'react-announce'
import rx from 'rx'

const bus = new rx.Subject()

@draggable
@asStream(bus)
class Apple extends Component {
  render () {
    return (
      <div draggable="true">
        APPLE
      <div>
    )
  }
}

@droppable
@asStream(bus)
class Basket extends Component {
  render () {
    return (
      <div>
        Fruit Basket
      <div>
    )
  }
}

consolidate(bus).subscribe(x => console.log(x))

/** OUTPUT:
{picked: {component: Apple}, type: 'PICKED'}
{over: {component: Basket}, picked: {component: Apple}, type: 'DRAG'}
{over: {component: Basket}, picked: {component: Apple}, type: 'DRAG'}
{over: {component: Basket}, picked: {component: Apple}, type: 'DROP'}
**/

API

  • @draggable — Dispatches DRAG_START event on the component's stream.
  • @droppable — Dispatches DRAG_OVER and DROP event on the component's stream.
  • consolidate(observer) — Takes input as the observer and returns a consolidated stream which contains information about what has been picked and where it has been dropped.