react-announce-draggable

    2.0.2 • Public • Published

    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.

    Keywords

    none

    Install

    npm i react-announce-draggable

    DownloadsWeekly Downloads

    1

    Version

    2.0.2

    License

    ISC

    Last publish

    Collaborators

    • tusharmathur