react-dnd/react-dnd v2.0.0

on GitHub

Breaking Changes

React 0.14 is now required

This release removes the warnings for React 0.14, but it now requires 0.14 too.

The UMD build is gone from master

The UMD build is no longer available in dist folder in master branch. Instead, it is available in dist folder on the latest branch and any future tagged release branch.

HTML5 backend and test backend are now in separate packages

We are using this opportunity to separate the backends out of React DnD repo and package.

You will need to install react-dnd-html5-backend in addition to react-dnd. You may also install react-dnd-test-backend.

Similarly, in UMD builds, ReactDnD no longer includes ReactDnD.HTML5. You need to use ReactDnDHTML5Backend provided separately in the dist folder of the latest or any tagged release branch in the react-dnd-html5-backend repo.

Official Bower support is gone

I no longer intend to support Bower. Please stop using Bower. NPM 3 works very well for front-end development, and you should use it instead.

Because the UMD builds are available on latest and tagged release branches of both React DnD and its HTML5 backend in the dist folder, you can point your configs to them instead.

connect*() methods no longer accept composite component elements

This worked and still works:

return connectDragSource(<div><Something /></div>);
return connectDragPreview(<div><Something /></div>);
return connectDropTarget(<div><Something /></div>);

However, this worked in 1.x, but will throw in 2.x:

return connectDragSource(<Something />);
return connectDragPreview(<Something />);
return connectDropTarget(<Something />);

This change was made to avoid dependency on react-dom for React DnD, which is a good thing for React libraries. It also enforces stronger encapsulation because the connect*() is now always located in the view that actually creates the related React DOM element. Relevant commit: 96d4c30.

The solution is to make sure that, when you pass a React element to connectDragSource, connectDragPreview, or connectDropTarget, it is always a React DOM element, and not an element for a custom component.

You have three ways of ensuring this, in the order of preference:

Change your connect*() calls to wrap custom components in <div>s

Before

return connectDragSource(
  <Something />
);

After

return connectDragSource(
  <div>
    <Something />
  </div>
);

Make those components drag sources or drop targets themselves

Before

return connectDragSource(
  <Something />
);

After

return <Something />; // assuming Something is a DragSource now

Call findDOMNode() yourself and put connect*() methods directly on the ref

This is especially useful if you used connect*() methods inside higher order components:

Before

return connectDragSource(
  <Something />
);

After

return <Something ref={instance => connectDragSource(findDOMNode(instance))} />;