New to React DnD? Read the overview before jumping into the docs.


DropTargetConnector is an object passed to the collecting function of the DropTarget. It provides the ability to bind your React component to the Drop Target role.


  • dropTarget() => (Element | Node | Ref): Returns a function that must be prop-injected into your component and used in that component's render() method. You may pass this function a react component, an DOM element, or a ref object to this method.


import React from 'react'
import { DropTarget } from 'react-dnd'

class DropZone {
  render() {
    const { connectDropTarget } = this.props
    return connectDropTarget(<div>You can drop here!</div>)

export default DropTarget(
  (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),


Check out the tutorial for more real examples!