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

FAQ

Usage

What is the @ syntax I see in the ES7 code examples?

First of all, you don't have to use ES6 or ES7 for React DnD. They make some of the code patterns more succinct, but it's up to you whether to enable these transformations.

When I say “ES7”, I mean ES6 + a few extensions that might make it into ES7 (also known as ES2016). What I mark as the ES7 code in the docs is actually ES6 code + class properties + decorators. You can enable these features by putting { "stage": 0 } into your .babelrc file. You can also enable them individually.

The @ syntax desugars into the simple function calls.
You can see that in every example on the website that uses it, such as:

ES5
ES6
ES7

var DragSource = require('react-dnd').DragSource;

var MyComponent = React.createClass({
  /* ... */
});

module.exports = DragSource(type, spec, collect)(MyComponent);

Where do I get the precompiled version?

Grab it from the dist folder in the repo.
It exports ReactDnD (watch the casing!) and ReactDnD.HTML5 for the HTML5 backend.

How do I test React DnD components and their interaction?

See the testing tutorial for examples.

How do I make the component draggable only by a small handle?

Specify the container node as the dragPreview, but only make the drag handle a dragSource().
See the custom drag handle example.

How do I constrain the drag preview movement?

By default, you can't constrain the drag preview movement because the drag preview is drawn by the browser. You can, however, use a custom drag layer where you're free to rendering anything, with any snapping or constraints.

How do I register a drag source or a drop target when the type depends on props?

Both DragSource and DropTarget let you pass a function as the first parameter instead of a string or a symbol. If you pass a function, it will be given the current props, and it should return a string, a symbol, or (for drop targets only) an array of either.

How do I combine several drag sources and drop targets in a single component?

Because DragSource and DropTarget use the partial application, you may compose them using a functional composition helper such as _.flow. In ES7, you can just stack the decorators to achieve the same effect.

ES5
ES6
ES7

var DragSource = require('react-dnd').DragSource;
var DropTarget = require('react-dnd').DropTarget;
var flow = require('lodash/function/flow');

var YourComponent = React.createClass({
  /* ... */
});

module.exports = flow(
  DragSource(/* ... */),
  DropTarget(/* ... */)
)(YourComponent);

How do I register a drop target for the native files?

If you are using the HTML5 backend, you can register a drop target for one of the NativeTypes it exports:

ES5
ES6
ES7

var React = require('react');
var NativeTypes = require('react-dnd/modules/backends/HTML5').NativeTypes;
var DropTarget = require('react-dnd').DropTarget;

var fileTarget = {
  drop: function (props, monitor) {
    console.log(monitor.getItem().files);
  }
};

var FileDropZone = React.createClass({
  render() {
    var connectDropTarget = this.props.connectDropTarget;
    var isOver = this.props.isOver;
    var canDrop = this.props.canDrop;

    return connectDropTarget(
      <div>
        {!isOver && !canDrop && 'Drag files from the hard drive'}
        {!isOver && canDrop && 'Drag the files here'}
        {isOver && 'Drop the files'}
      </div>
    );
  }
});

module.exports = DropTarget(NativeTypes.FILE, fileTarget, function (connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  };
})(FileDropZone);

How do I write a custom backend?

This is not currently documented, but you can take cues from the built-in HTML5 and Test backend implementations. The backend contract includes setup() and teardown() methods, and connectDragSource(), connectDragPreview() and connectDropTarget() methods that pass the DOM nodes to the backend. Contributions to the documentation are welcome.

I am getting a “Super expression must either be null or a function, not undefined” error

React DnD requires React 0.13. Make sure you are using at least that version.

Why won't my static methods and properties work?

Consider this example:

ES5
ES6
ES7

var Page = React.createClass({
  statics: {
    willTransitionTo: function (transition, params) {
      /* ... */
    },
  },

  render: function () {
    /* ... */
  }
});

module.exports = DragDropContext(HTML5Backend)(Page);

It might surprise you that your route handler's willTransitionTo (or a similar method) won't get triggered in this case! React DnD doesn't proxy your components' static methods and properties. This is too fragile and full of edge cases, so you must do it yourself. It's not hard! Just put your statics onto the components returned by React DnD instead:

ES5
ES6
ES7

var Page = React.createClass({
  render: function () {
    /* ... */
  }
});

Page = DragDropContext(HTML5Backend)(Page);
Page.willTransitionTo = function (transition, params) {
  /* ... */
};

module.exports = Page;

Quick Start

Top-Level API

Connecting to DOM

Monitoring State

Backends

FAQ

Usage

What is the @ syntax I see in the ES7 code examples?

Where do I get the precompiled version?

How do I test React DnD components and their interaction?

How do I make the component draggable only by a small handle?

How do I constrain the drag preview movement?

How do I register a drag source or a drop target when the type depends on props?

How do I combine several drag sources and drop targets in a single component?

How do I register a drop target for the native files?

How do I write a custom backend?

I am getting a “Super expression must either be null or a function, not undefined” error

Why won't my static methods and properties work?

Meta

Is this Dungeons & Dragons?

How stable is it?

What is the roadmap?

Who made it and why?

How Do I Contribute?