tusharmath / react-announce-draggable

expose component drag and drop events as a stream

Reactive Announce Draggable

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.

react-announce-draggable's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.