react-beautiful-dnd wrapper to add payloads and callback support on draggables and droppables, see https://github.com/atlassian/react-beautiful-dnd/issues/498

DragDrop.js

import React from "react"
import { DragDropContext as DragDropContext_, Droppable as Droppable_, Draggable as Draggable_ } from "react-beautiful-dnd"


// Maps

const draggableMap = {}
const droppableMap = {}


// Draggable

export class Draggable extends React.Component {
  componentDidMount() {
    draggableMap[this.props.draggableId] = this
  }

  componentWillUnmount() {
    delete draggableMap[this.props.draggableId]
  }

  callHandler = (handler, result) => {
    this.props[handler] && this.props[handler](result)
  }

  getPayload = () => this.props.payload

  render() {
    return <Draggable_ {...this.props} />
  }
}


// Droppable

export class Droppable extends React.Component {
  componentDidMount() {
    droppableMap[this.props.droppableId] = this
  }

  componentWillUnmount() {
    delete droppableMap[this.props.droppableId]
  }

  callHandler = (handler, result) => {
    this.props[handler] && this.props[handler](result)
  }

  getPayload = () => this.props.payload

  render() {
    return <Droppable_ {...this.props} />
  }
}


// DragDropContext

export class DragDropContext extends React.Component {
  callHandler = (droppableId, handler, result) => {
    droppableMap[droppableId] && droppableMap[droppableId].callHandler(handler, result)
  }

  callHandlerOnDraggable = (draggableId, handler, result) => {
    draggableMap[draggableId] && draggableMap[draggableId].callHandler(handler, result)
  }

  getPayload = (droppableId) => {
    return droppableMap[droppableId] && droppableMap[droppableId].getPayload()
  }

  getDraggablePayload = (draggableId) => {
    return draggableMap[draggableId] && draggableMap[draggableId].getPayload()
  }

  handleEvent = handler => result => {
    let { source, destination, draggableId } = result

    if (source) { source.payload = this.getPayload(source.droppableId) }
    if (destination) { destination.payload = this.getPayload(destination.droppableId) }
    
    result.payload = this.getDraggablePayload(draggableId)

    // console.log(handler, result)

    this.callHandlerOnDraggable(draggableId, handler, result)

    if (destination) {
      this.callHandler(destination.droppableId, handler, result)
    }

    if (!destination || destination.droppableId !== source.droppableId) {
      this.callHandler(source.droppableId, handler, result)
    }

    this.props[handler] && this.props[handler](result)
  }

  render() {
    let newProps = {
      ...this.props,
      onBeforeDragStart: this.handleEvent('onBeforeDragStart'),
      onDragStart: this.handleEvent('onDragStart'),
      onDragUpdate: this.handleEvent('onDragUpdate'),
      onDragEnd: this.handleEvent('onDragEnd')
    }
    return <DragDropContext_ {...newProps} />
  }
}

Hi!

Do you have an example on how to use it?

@jrewing I think you could follow react-beautiful-dnd examples for the most part, just save this gist as a file in your project and import DragDropContext, Draggable and Droppable from this file instead

Then you are able to use callbacks (onBeforeDragStart, onDragStart, onDragUpdate, onDragEnd) on Droppables and Draggables instead of having to use them at DragDropContext level

Or you can add a payload as a prop to a Draggable or a Droppable, and access that payload from DragDropContext's callbacks through result.payload for the Draggable, and through source.payload and destination.payload for the Droppables

thanks!

good job!

Thank you for this! I couldn't figure out how to use this file in conjunction with TypeScript, so I translated it and added type definitions. Here's the fork if anyone finds it useful.