@react-dnd/invariant

3.0.0 was intended as a prerelease version (apologies for not including a -beta tag). This is the "final" 3.0 release.

The typings here have been updated to align more closely with the DefinitelyTyped react-dnd typings. They are much more accurate than in the prerelease.

Edit: please don't use this version, we discovered a critical issue with the documentation site.

In this release we've migrated the codebase to Typescript. The published libraries now have their own embedded typings definitions. It will remain an ongoing effort to improve the typings in our code.

Breaking Changes:

• Removed the dependency on window from react-dnd. This should allow us to experiment with using react-dnd react-native. To support this, the DragDropContextProvider has been totally changed up. It now accepts a context object parameter that is backend-implementation dependent. Currently the HTML5Backend will need context to be { window }
• The DragDropContext component will no longer try to unpack ES6 modules. The difference between CommonJS and ES6 module formats is well known by now.
• The dnd-core`s redux actions are now FSA-compliant.
• dnd-core Redux has been upgraded to 4.x

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: https://github.com/gaearon/react-dnd/commit/96d4c309089274839503ff95e4f8bfc979c364b7.

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))} />;