NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #4810 most downloaded on npm
Drag and Drop for React
Last release 4 years ago
no release in 18 months
Release timing varies
gaps range from 2 weeks to 9 months
Most releases are documented
notes for 51 of the last 60 stable releases
5 versions withdrawn
withdrawn after publishing
12 years old
140 releases · first in 2014
Remove the esModuleInterop setting from our tsconfig.json, this corrects typings for users who were not using esModuleInterop mode, and improves the b
Remove the esModuleInterop setting from our tsconfig.json, this corrects typings for users who were not using esModuleInterop mode, and improves the bundled library sizes.
UMD builds were missing from react-dnd and react-dnd-html5-backend in 4.0.2.
react-dnd and react-dnd-html5-backend in 4.0.2.One column per quarter.
Nothing published for this version
Nothing published for this version
React 17 prep - remove usage of lifecycle methods that are being deprecated
Breaking Changes:
Other Changes:
require()s with imports, which was causing grief for some users. This resulted in some culling of dependencies.decorateHandler. This check was not working correctly in certain situations, and resulted in silent failures. By just setting the ref directly, React will emit warnings about not being able to ref SFCs, which is more useful.This patch release changes the typescript transpilation from es2015 to es5. This should resolve some issues users had reported due to es2015 syntax.
This patch release changes the typescript transpilation from es2015 to es5. This should resolve some issues users had reported due to es2015 syntax.
3.0.0 was intended as a prerelease version (apologies for not including a -beta tag). This is the "final" 3.0 release.
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
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:
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 }New Feature: Passing Derivative Props to DragLayer to minimize render cycles (#979).
Fixes an issue in the DragDropContextProvider where the backend was created on every render (#859) - thanks @WearyMonkey
refs with StatelessFunctionalComponents (#898) - thanks @knowbodyThis doesn't affect the packages, but the documentation was using some deprecated react/lib modules, and the react-hot-loader needed to be updated.
react/lib modules, and the react-hot-loader needed to be updated.Add React@16 to peer-dependencies to react-dnd
react-dnd peer-dependency from HTML5BackendCorrect SSR bug due to addEventListener and removeEventListener methods not being available in server-mode
addEventListener and removeEventListener methods not being available in server-mode (#813)babel-preset-env instead of babel-preset-latestMigrated deprecated React.PropTypes in example + same for React.createClass in docs (#729) (abbe4c7), closes #729
Nothing published for this version
Includes a fix for server-side rendering with the DragDropContextProvider #672, (thanks @liors)
Starting with this release, the packages will all be released simultaneously using the same version numbers.
Starting with this release, the packages will all be released simultaneously using the same version numbers.
Add DragContextProvider class, use updated dnd-core with support for injectable global context.
DragContextProvider class, use updated dnd-core with support for injectable global context.Allow React 15 as peer dependency
Remove the developer warning when default export is accessed (#408, #409)
Removes accidental console.log() in UMD builds
console.log() in UMD builds (#385)Attempts to fix a memory leak when rendering on the server (#379, #337)
Updates to Lodash 4 (#363, fecd21fcaab2f1482d4079aed335f4482cbf9d56)
latest branch. If you use Bower, point your config to npmcdn. For example: https://npmcdn.com/react-dnd@latest/dist/ReactDnD.min.jsFixes #261 hopefully for good—the change in 2.0.1 wasn't covering all cases
Don't throw on undefined options when nodes are equal. Fixes #261
This release removes the warnings for React 0.14, but it now requires 0.14 too.
This release removes the warnings for React 0.14, but it now requires 0.14 too.
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.
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.
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 elementsThis 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:
connect*() calls to wrap custom components in <div>sreturn connectDragSource(
<Something />
);
return connectDragSource(
<div>
<Something />
</div>
);
return connectDragSource(
<Something />
);
return <Something />; // assuming Something is a DragSource now
findDOMNode() yourself and put connect*() methods directly on the refThis is especially useful if you used connect*() methods inside higher order components:
return connectDragSource(
<Something />
);
return <Something ref={instance => connectDragSource(findDOMNode(instance))} />;
Fixes Firefox navigating to dropped text, link or image: https://github.com/gaearon/react-dnd/issues/221, https://github.com/gaearon/react-dnd/issues/
Should fix https://github.com/gaearon/react-dnd/issues/277 by bumping dnd-core@1.2.1 and performing resubscription in correct order
dnd-core@1.2.1 and performing resubscription in correct order (https://github.com/gaearon/react-dnd/pull/278)Bump React peerDependency to allow 0.14 RC
Allows all further React 0.14 betas as peerDependency
Allow React 0.14 Beta 1 as a peerDependency
Add back the UMD builds to NPM and Bower
Bump minimum invariant dep to 2.1.0. Fixes the missing envify dependency issue for Browserify users
invariant dep to 2.1.0. Fixes the missing envify dependency issue for Browserify users (#182)- Fixes a crash in Safari
1.1 is a minor release focused on fixing issues with dragging native items.
1.1 is a minor release focused on fixing issues with dragging native items.
NativeTypes.TEXT to the HTML5 backend;If you find any issues, please report them to the bug tracker!
There are many, many breaking changes in 1.0, compared to 0.9. One can say it's a whole new library.
There are many, many breaking changes in 1.0, compared to 0.9. One can say it's a whole new library.
It fixes the many flaws of 0.x. It works out of the box with non-createClass components, it is much more performant, extensible, testable and friendly to edge cases.
Check out the new website: http://gaearon.github.io/react-dnd/
It has docs: http://gaearon.github.io/react-dnd/docs-overview.html
It has a brand new tutorial: http://gaearon.github.io/react-dnd/docs-tutorial.html
It has a great new example: http://gaearon.github.io/react-dnd/examples-chessboard-tutorial-app.html
I've been working on this release for two months. It would not have happened without the generous donations from Macropod and Webflow.
The personal thanks go out to Nathan who inspired me to get this library to 1.0 with his enthusiasm.
Cheers to everyone involved, Dan
The lower-level ref={connectDragSource} API still works, but might get deprecated somewhere during 1.x.
This is the release candidate for 1.0.
It fixes the UMD build, now including HTML5 backend as ReactDnD.HTML5.
It also has one major change from the latest beta: ref usage is now an implementation detail.
Instead of writing
render() {
const { connectDragSource } = this.props;
return (
<div ref={connectDragSource}>...</div>
);
}
you can now write
render() {
const { connectDragSource } = this.props;
return connectDragSource(
<div>...</div>;
);
}
Internally it will still work by attaching a ref to the element, but this approach is more flexible and opens the door for supporting React Native in the future. It also reads more easy and has less WTF potential.
The lower-level ref={connectDragSource} API still works, but might get deprecated somewhere during 1.x.
As I was working on the docs for 1.0 release, I realized that 1.0 API can be much simpler so I just rewrote everything. Here's a few snippets before a
As I was working on the docs for 1.0 release, I realized that 1.0 API can be much simpler so I just rewrote everything. Here's a few snippets before and after to justify that.
@DragDrop(
register =>
register.dragSource(ItemTypes.BOX, BoxSource),
boxSource => ({
connectDragSource: boxSource.connect(),
isDragging: boxSource.isDragging()
})
)
export default class Box {
@DragSource(ItemTypes.BOX, boxSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))
export default class Box {
@DragDrop(
(register, props) =>
register.dragSource(props.type, BoxSource),
boxSource => ({
connectDragSource: boxSource.connect(),
isDragging: boxSource.isDragging()
})
)
export default class Box {
@DragSource(props => props.type, boxSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))
export default class Box {
@DragDrop(
register =>
register.dropTarget(ItemTypes.BOX, BoxTarget),
boxTarget => ({
connectDropTarget: boxTarget.connect()
})
)
export default class Container extends Component {
@DropTarget(ItemTypes.BOX, boxTarget, connect => ({
connectDropTarget: connect.dropTarget()
}))
export default class Container extends Component {
@DragDrop(
(register, props) =>
register.dropTarget(props.accepts, BoxTarget),
boxTarget => ({
connectDropTarget: boxTarget.connect()
})
)
export default class Container extends Component {
@DropTarget(props => props.accepts, boxTarget, connect => ({
connectDropTarget: connect.dropTarget()
}))
export default class Container extends Component {
@DragDrop(
register => ({
cardSource: register.dragSource(ItemTypes.CARD, CardSource),
cardTarget: register.dropTarget(ItemTypes.CARD, CardTarget)
}),
({ cardSource, cardTarget }) => ({
connectDragSource: cardSource.connect(),
connectDropTarget: cardTarget.connect(),
isDragging: cardSource.isDragging()
})
)
export default class Card {
@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))
export default class Card {
This is going to be the final API for 1.0. It is now frozen, and I'm only going to work on documentation and examples.
Fix previous broken pre-release (by mistake, it contained master version instead of 1.0 branch)
master version instead of 1.0 branch)Add a workaround to make custom drag layer usable in IE11 (fixes #88)
A major rewrite with ES6 classes in mind, major perf improvements and more powerful and consistent API. Currently no docs, but feel free to browse exa
A major rewrite with ES6 classes in mind, major perf improvements and more powerful and consistent API. Currently no docs, but feel free to browse examples in the tag's branch.
Catch dragenter and dragleave at capture phase to fix isHovering in full-screen drop targets ([#119](https://github.com/gaearon/react-dnd/issues/119))
dragenter and dragleave at capture phase to fix isHovering in full-screen drop targets (#119)Expose currentOffsetFromClient, initialOffsetFromClient, initialOffsetFromContainer from DragLayerMixin#getDragLayerState
currentOffsetFromClient, initialOffsetFromClient, initialOffsetFromContainer from DragLayerMixin#getDragLayerStateAdd React 0.13 as valid peer dependency
Expose getInitialOffsetFromContainer on DragDropContext ([#114](https://github.com/gaearon/react-dnd/pull/114#))
getInitialOffsetFromContainer on DragDropContext (#114)Fix links inside drag sources. Now links are only interpreted as URL drag sources if no parent drag source started dragging.
Fix a crash when dragging a text node
Fix nested drag sources. Previously, beginDrag would fire for all nested drag sources, making React DnD state inconsistent. Now, they work as expected
beginDrag would fire for all nested drag sources, making React DnD state inconsistent. Now, they work as expected, with canDrag also handled correctly. Fixes #100.Support Symbol as data type in addition to string
Symbol as data type in addition to string (https://github.com/gaearon/react-dnd/pull/102)NativeDragItemTypes.URL in addition to FILE (https://github.com/gaearon/react-dnd/pull/97)getInitialOffsetFromClient, getCurrentOffsetFromClient to context parameter (https://github.com/gaearon/react-dnd/issues/101)configureDragDrop is now static
configureDragDrop is now statice parameter is removed from all methodsacceptDrop parameter order changes due to e being removedSee migration instructions in the Upgrade Guide!
Happy dragging and dropping.
Update peerDependencies to include React 0.13 Beta
peerDependencies to include React 0.13 BetaFixes acceptDrop not being called in IE
acceptDrop not being called in IEAdds `DragLayerMixin` for drawing a custom drag layer.
DragLayerMixin for drawing a custom drag layer.DragLayerMixin to change drag preview while drag is in progress.context parameter to configureDragDrop. Use it to learn how far the mouse has moved during dragging operation.Potentially breaking change: endDrag is now called even is drag source was unmounted while dragging. Fixes #38. You can check component.isMounted() (t…
endDrag is now called even is drag source was unmounted while dragging. Fixes #38. You can check component.isMounted() (this.isMounted() with deprecated API) if this is important for your endDrag handler.lodash-node dependency to lodash.Deprecate configureDragDrop as an instance method. It needs to be moved to statics, and all methods inside should receive component as first parameter…
configureDragDrop as an instance method. It needs to be moved to statics, and all methods inside should receive component as first parameter instead of using this. The old API works in this version but will be removed in the next one.When drag source is removed from DOM, dropping outside the window shouldn't freeze the UI
Nothing published for this version
Expose compiled ES5 modules in dist-modules
Doesn't use methods deprecated in React 0.12
Use Copy as drop effect for files
Your coding agent can read these notes before it upgrades. Set up the MCP server →