react-dnd
4.4/541

react-dnd

npm i react-dnd

140 Versions

16.0.1

latest
4 months ago

16.0.0

4 months ago
Major

15.1.2

5 months ago

The utility packages @react-dnd/invariant, @react-dnd/shallowequal, and @react-dnd/asap (which are forks of popular libraries) have been included in the monorepo and built using the same output mechanisms as the react-dnd core packages (dual EJS/CSM).

@react-dnd/asap has been simplified to remove the node variant, which relied on deprecated APIs


15.1.1

6 months ago

15.1.0

6 months ago
  • All packages now have verified ESM support
  • Packages expose CJS/ESM surface are via pkg.exports

15.0.2

6 months ago

This release uses output from swc using the 'es2017' target instead of using output from 'tsc' using the 'ESNext' target.


15.0.1

6 months ago

This release fixes issues with the ESM-only structure of v15.0.0. All packages are now in their prior CommonJS/ESM format.


15.0.0

6 months ago
Major Changes
  • The react-dnd packages are now published as ESM-only with type: module. See this FAQ by sindresorhus: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

  • The Decorators API has been removed and fully replaced by the Hooks API. The Decorators API was difficult to develop & type correctly, and this improves its maintainability.

  • The builds no longer use babel & preset-env. The library is transpiled using SWC into the "es2017" target, which assumes async/await is available. This should reduce bundle sizes by removing polyfills and support-code which may be unnecessary in your target.

Bugfixes
  • Improve data-transfer acquisition from File inputs (#3262)
  • Don't set the 'draggable' attribute unless canDrag is true (#3187)
  • Improve typings of DropTargetMonitor, DragLayerMonitor (#3300, #3341)

14.0.5

8 months ago

14.0.4

1 year ago

14.0.3

1 year ago
Updated

react-dnd: 14.0.3 react-dnd-html5-backend: 14.0.1 react-dnd-touch-backend: 14.1.0

Patch Updates
  • Fix drop operations in iframes & child windows (#3181) (thanks @eramdam!)
  • Refactor TouchBackend OptionsReader (#3291)
  • Cleanup connected DOM elements from react-dnd internals when hook-based components unmount (#3290)
  • Fix issue where custom drag-sources where triggering native drops in Firefox (#3272) (thanks @istateside)

14.0.2

1 year ago
Patch

This PR will throw a developer exception if a user specifies a useDrag::spec.begin method.


14.0.1

1 year ago
Patch

Update internal hook useDragType() to align with updated typings. Check 14.0.0 release for API changes


14.0.0

1 year ago

This release addresses a handful of nagging liveness and ergonomic issues with the hooks API.

The liveness issues affect all hooks, and were discovered on deeper inspection of certain stress tests in the documentation. The internal useCollector() hook is used to collect props from the DnD system when things change. Prior to this update, we subscribed to updates from the DnD monitor to trigger prop collection. However, state on the react side was only accounted for on the first render. This release improves that liveness by collecting props whenever react state changes.

The ergonomics of the useDrag have been refactored. In short:

  • spec.type is required
  • spec.item can be a function or static object.
  • The function version of spec.item replaces spec.begin

Since the release of the hooks API, we packed type under spec.item. However, this led to nonintuitive situations where an item field was required to be specified even though items are created in the begin method.

Additionally, in the original React-DnD design, beginDrag() was optional and the type of the draggables had to be defined. If no explicit DragObject was created, an implicit object was created by the system..

The change we've made here decouples type from item, and collapses begin into item.

// Pre-v14
useDrag({
   // item defined here to get a type
   item: { type: BOX } },
   // ...but the actual item is created here
   begin: () => ({ id })
})

// v14
useDrag({
   type: BOX,
   item: () => ({id})
})

e.g. useDrag({ item: { type: BOX }}) => useDrag({ type: 'BOX' })

We've also added the ability to cancel drag operations in the hooks API by returning null from begin.

// new API
useDrag({
  type: BOX,
  item: () => shouldNotDrag ? null : {id},
})

13.1.1

1 year ago
react-dnd Patch
  • Re-register drag sources in hooks API when item.type changes
  • Export missing typings
react-dnd-html5-backend Patch
  • Export HTML5Context, HTML5BackendOptions interfaces

13.1.0

1 year ago
react-dnd

TLDR: useDrag and useDrop support both a memo pattern and a spec object now.

useDrag(() => spec) // good
useDrag(spec) // also good

In v13, we've tried to address some errors that were pervading with the react-dnd hooks API. Generally, making sure DragSource/DropTargets were up-to-date and that the system wasn't leaking handles was a precarious balancing act. Moving to a memo API pattern (e.g. useDrag(() => spec)) fixed this problem in our tests.

However, as we dug further into handler leakage issues, it became clear that anything using the hooks would reattach and receive a new handler ID whenever the spec changed at all. This was in contrast to the Decorator API's behavior of keeping stable handler IDs as the incoming props changed.

To fix the Hooks API to stop leaking handlers, we found a pretty simple solution: a classical class with a public setter for the spec object that's updated via a useEffect hook. This neatly avoids the mutating DragSource/DropTargets on every spec change. This had two effects: identifiers have been stabilized, and spec objects were usable again because changing them didn't cause DragSource/DropTarget instances to be regenerated and reattached.

In retrospect, this undoes the necessity of the major cut that happened with v13, but the Hooks API is much sturdier now. We hope that you find the improved memory stability in the hooks API to be useful in your projects.


13.0.1

1 year ago
Patch Updates
  • Add invariant() invocations in useDrag, useDrop to verify that spec functions are used instead of objects
  • Fix handler registration memory leak issue with useDrag, useDrop

13.0.0

1 year ago
React-DnD v13, Others v12

v12 was largely structural and organizational, but some issues were discovered shortly after release that warranted changing the hooks API.

Breaking Changes
  • useDrag, useDrop hooks accept functions that create spec objects instead of spec objects directly. Clients can think about the API to useDrag() and useDrop() as being analogous to useMemo(). This allows clients to have direct control over when their DnD specifications are re-generated (which internally reattaches them to the DnD system).
  • Use jsx-factory throughout the library
Non-Breaking Changes
  • Add HTML native draggable type to HTML5Backend (see new example)
  • Clients can specify a rootElement component in the HTML5Backend options to localize where DnD will process events in the client app.
  • react-dnd-test-utils has improved support for testing with HTML5Backend and using @testing-library/react to simulate drag-and-drop sequences.

12.0.0

1 year ago

11.1.3

2 years ago
Patch

Update .npmignore files so that tsbuildinfo files are not included in publication. This reduces package sizes.


11.1.1

2 years ago

11.1.0

2 years ago
Minor
  • Add getDecoratedComponent() method to wrapInTestContext imperative API. (#2488)
Patch
  • Improve typings of wrapInTestContext(#2486)
  • Eliminate module cycles in react-dnd (#2491)

11.0.0

2 years ago
Breaking Changes

Update Backends to use named exports for BackendFactory functions instead of default exports.

e.g. import HTML5Backend from 'react-dnd-html5-backend 👇 import { HTML5Backend } from 'react-dnd-html5-backend

In general, throughout the app we've minimized the usage of default exports as well. They interfere with type correctness and screw with UMD builds (e.g. having to scrape a .default property off of a UMD global).

Minor Changes
  • Expose internal hook useDragDropManager at top level
  • Add profiling function to backend interface
  • Make handler functions public on backends
Patch Changes
  • Correct memory leak in drag previews (#2423)
  • Improve and correct typings

10.0.2

3 years ago
Patch

dnd-core: Use updated version @react-dnd/asap with browser variant support, this allows us to drop syntheticDefaultImports in dnd-core.


10.0.1

3 years ago
Patch

Fix UMD builds - our fork of ASAP was being brought in with node-specific code, breaking UMD builds. Using the canonical version of ASAP until we update our fork (#1684 )


10.0.0

3 years ago
Major

The package.type=module setting has been removed. This proved to be a major pain point for users, and was technically problematic at this time. We will eventually ship with package.type=module when NodeJS 12 drops out of maintenance and all of our dependencies ship ESM. (#1683)

Patch

The touch-backend has been updated to work-around iOS 13.x eventing issues (#1631) (thanks @zhusee2!)


9.5.1

3 years ago
Patch
  • Remove syntheticDefaultImport usage of react in react-dnd (#1629) thanks @sandersn . Fully removing syntheticDefaultImport from react-dnd is a WIP. We will need pure ESM versions of asap and hoist-non-react-statics. Ideally invariant and shallowequal would have ESM builds available as well, but there are forked ESM variants of these packages.

9.5.0

3 years ago
Minor Changes
  • Declare packages side-effect free for tree-shaking (#1577), thanks @maclockard
  • HTML5Backend: Make file metadata available on dragstart event (#1610), thanks @LeopoldLerch
  • TestBackend: Add DragDropManager accessor to TestBackend (#1564), thanks @ezr-ondrej
Patch Changes
  • Improve UMD builds to conform to browserslist support target, add some basic UMD verification tests

9.4.0

3 years ago
Minor
  • UMD builds are now shipped with the react-dnd, react-dnd-html5-backend, and react-dnd-touch-backend packages in addition to react-dnd-umd-builds
Patch
  • Added refcounting to the DndProvider component. If the DndProvider is unmounted, the manager instance will be cleared out of the global context.

9.3.4

3 years ago
Patch
  • (Typings) - Add getTargetIds to DragSourceMonitor interface declaration (#1478)
  • Replace for..of statements with other looping semantics for older browser support (#1428
  • Add an isomorphic useLayoutEffect implementation for SSR (#1497)
  • Correct DragPreview connection logic for chainable connector functions (#1500)

9.3.2

3 years ago
Patch
  • Fixed some issues in react-dnd where named exports of interfaces were causing JS breakage (#1462)
  • Added a cra-test package to verify that react-dnd can be used in the context of create-react-app by default (#1462)

9.3.1

3 years ago
Libraries Affected

All libraries

Minor
  • Add CJS builds to the core packages in order to facilitate better testing. (#1455, #1460)
Patch
  • Correct some issues with interface imports/exports using Babel's TS transpilation (#1459)

9.2.1

3 years ago
Libraries
  • react-dnd
  • react-dnd-cjs
  • react-dnd-test-utils
  • react-dnd-test-utils-cjs
  • react-dnd-umd-builds
Patch
  • Redefine XYCoord interface in react-dnd interfaces (#1454)

9.1.0

3 years ago
Libraries

All Libraries Affected

Minor

The react-dnd toolchain has been changed up from using TypeScript to using Babel. This allows us to use a ‘browserlist’ query instead of a coarse tsc target when defining what JS features to ship with. The public API has not changed at all, but there could be underlying changes if your code is implementation dependent.


9.0.1

3 years ago
Patch
  • Correct an issue where drag previews were disconnected if the dragSource changed (#1441)

9.0.0

3 years ago
Major
  • Remove DragDropContext decorator. (#1439)
  • Update BackendFactory function in dnd-core to accept a configuration object. (#1439)
  • Construct the Backend outside of the DragDropManagerImpl class (#1439)
Minor
  • Add react-dnd-touch-backend library
  • Update DndProvider to accept an 'options' prop with backend configuration
  • Correct state staleness issues when using hooks-based API (#1429, #1437)
Patch
  • Prevent starting a react-dnd drag operation if a dragstart event has it's default-prevented (#1426)

8.0.3

3 years ago
Bugfixes
  • The DndProvider component had been throwing errors if it was rendered multiple times because of the implicit singleton invariant of the HTML5Backend. To correct this, if a backend factory is passed to the DndProvider using <DndProvider backend={HTML5Backend}/>, it will only create a singleton instance of the DndContext per global context. This means that to create a second backend for an iframe, one needs to use: <DndProvider backend={HTML5Backend} context={iframeWindow} />.

7.7.0

3 years ago

The package.json files for the react-dnd libraries contained a "module" field which was used to identify where the ES Module roots began. These fields were added with the intent of supporting CommonJS module loading (the de-facto NodeJS module system) simultaneously with the ES Module loading system (the emerging standard for JavaScript modules).

Unfortunately this change resulted in a lot of build headaches for users then their module bundlers started defaulting to using the ES Module roots.

This release reverts that change and leaves the v7 branch of React-Dnd as primarily using CommonJS. ES Module builds are still available under the esm/ folders, but it is up to users to use them at their own discretion.

In v8, ES Modules are used as the default module system. CommonJS-based packages are still available however in react-dnd-cjs, and react-dnd-html5-backend-cjs


8.0.2

3 years ago
Patch

The CommonJS libraries had runtime issues due to some @ts-ignore statements on non-typed module imports. Those have been removed from the core libraries.


8.0.0

3 years ago
Major
  • ES Modules. The target output of TypeScript has been changed to esnext with esnext modules. This speeds up and simplifies our build process, and targets the future with modern web standards. The UMD builds have been moved to a new 'react-dnd-umd-builds' package. CommonJS builds have been removed.
  • Polyfills: Legacy polyfills have been removed. At this point, that's just String.endsWith
  • DragDropContextProvider:
    • ~DragDragDropContextProvider~ => DndProvider
    • ~DragDropContext, DragDropContextConsumer, and DragDropContextProvider~ => DndContext.

7.6.1

3 years ago

7.6.0

3 years ago
Minor

Hooks API release


7.5.0

3 years ago
Minor
  • Allow DragDropContextProvider to accept a manager prop (#1362)
Patch
  • Improve performance of backend subscriptions (#1355, related)
  • Handle cases where a DragDropRegistry may return an undefined dropResult. (#1281)
  • Correct function-state issues with hooks-based APIs.

7.4.5

3 years ago
  • Replace some remaining lodash imports with our internal replacements.
  • Check for null cases in the DragSourceMonitor and DropTargetMonitor to handle situations where clients may be using older versions of dnd-core.

7.4.4

3 years ago
  • Replace lodash with custom functions
  • Correct issue where getDecoratedComponentInstance() would throw invariant errors when used internally
  • Add String.endsWith polyfill for semver compat
  • Improve decorator API typings (#1306)

7.4.3

3 years ago
Patch

Fixes an issue when using function components utilizing React.forwardRef as DragSource/DropTargets. The React-DnD wrapper class was being passed as the ref instance to hover instead of the decorated component instance.


7.4.2

3 years ago
Patch
  • Fixed an issue where refs were being attached to function components via the DragLayer and DragDropContext.
  • Fixed an issue where ref-forwarded function function components were not having refs attached to them.
  • Updated the invariant messages regarding ref attachment to indicate that clients can either use a React Class component or React.forwardRef() to get instance handles.

7.4.1

3 years ago
Patch
  • SSR fixes

7.4.0

3 years ago
Minor
  • Add a third argument to the collector functions in DragSource and DropTarget that includes the props of the current component. (e.g. collect(connect, monitor, props)
  • Connect functions can now accept Ref objects. (e.g. connectDragSource(ref))
  • Add a new DragPreviewImage renderless component that wires up Drag Preview images.
  • Improve decorated types to include as much of the original types as we can. Our typing strategy for this followed the same pattern that react-redux uses.
  • Add react-dnd-test-utils package, which exposes the wrapInTestContext utility function
Patch
  • Throw invariant errors when components are rendered outside of a DragDropContext.
  • Hooks API updates

7.3.2

3 years ago

#1265 - Update ConnectDragSource/ConnectDropTarget typings to include null and Element consistently. #1266 - Update the experimental hooks API dragSource specification so that begin may return a dragObject.


7.3.1

3 years ago

Updates to the non-stable, hooks-based API.

  • Add useDragPreview hook.

    • accepts a refForwarding component and returns an array with a component in slot zero that renders the component into a detached portal, and a ref in slot 1 that may be used in the dragSpec.
  • useDrag

    • the begin() function is now optional, and returns void.
    • the first argument of end() is the DragResult
    • the type property has been removed
    • add a required item property, which must contain a type field
    • make the ref field optional, if this is not set, then one will be created.
    • returns an array: collected props in slot zero and the ref being used in slot 1
  • useDrop

    • the type property has been renamed accept
    • the drop, hover and canDrop functions now take the DragItem as the first argument.
    • make the ref field optional, if this is not set, then one will be created.
    • returns an array: collected props in slot zero and the ref being used in slot 1

7.3.0

3 years ago

Minor Changes

  • Add DragDropContextConsumer to the top-level react-dnd export (#1260)

Patch Changes

  • Hooks API updates, add experimental flag to documentation to use hooks-based examples

7.2.1

3 years ago

This patch release puts the experimental hooks API behind an annoying import so that it's clear to users that this API should not be used in production yet.

import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'

const { useDrag, useDrop } = __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__
...

7.2.0

3 years ago
  • [patch] - #1249 - Check for uninitialized source/target identifiers

  • [patch] - #1250 - Use ES5 target for CommonJs builds.

  • [minor] - #1251, #1244, #1173 - Experimental Hooks API

This release includes an experimental hook-based React-Dnd API. Documentation for this feature still needs to be created, but the three public facing hooks are: useDragSource, useDropTarget, and useDragLayer.

The hooks API will is currently experimental, and breaking changes of hooks may occur in non-major versions.

  • useDragSource:
const ref = useRef(); // pass in a ref instead of connectDragSource()
const { isDragging } = useDragSource(ref, ItemTypes.KNIGHT, {
    beginDrag(monitor){ /* */ },
    // collect function defined in specification
    collect: monitor => ({
        isDragging: monitor.isDragging(),
    }),
})
return <div ref={ref}>...</div>
  • useDropTarget:
const ref = useRef(); // pass in a ref instead of connectDropTarget()
const { isOver, canDrop } = useDropTarget(ref, ItemTypes.KNIGHT, {
    canDrop: () => canMoveKnight(props.x, props.y),
    drop: () => moveKnight(props.x, props.y),
    // collect function defined in specification
    collect: monitor => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
    }),
})

return <div ref={ref}>...</div>
  • useDragLayer
const props = useDragLayer(monitor => ({
    item: monitor.getItem(),
    itemType: monitor.getItemType(),
    initialOffset: monitor.getInitialSourceClientOffset(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging(),
}))

7.1.0

3 years ago
  • Add EsModule builds in addition to CommonJS builds (#1205)
  • Remove the dropEffect=none setting on native DnD events (#1240)
  • Expose dataTransfer.items for files (#1241)
  • Correct child mounting order (#1220)
  • Refresh Dependencies (#1243)
  • Eliminate errors when using Ref objects (#1242)

7.0.2

4 years ago

License Update The library was originally licensed as MIT, but during the transition to a Monorepo, the license was set to BSD 3-Clause. This release corrects that error and restores the MIT license across all packages.


7.0.1

4 years ago

7.0.0

4 years ago

6.0.0

4 years ago
  • [Major] - Improve typings for DragSource, DropTarget and DragLayer decorator functions. This required dropping support of TypeScript decorators in our examples, and may cause breaking changes for TypeScript users. The core issue is that Typescript decorator results need to be assignable to the incoming type. We want to be able to explicitly remove DnD-collected props from the resultant component type. Our old way of dealing with this was to make DnD-collected props optional in our props interfaces, which resulted in unnecessary null-checks in render, and a leaky client interface. (#1134)
  • [Patch] - In the beginDrag action, since publishSource defaults to true when no argument is passed, use a default initializer when an object is entered that does not specify it (#1161)
  • [Patch] - Replace use of autobind-decorator library with class bind semantics, which eliminates that dependency.
  • [Patch] - Fire off an initCoords event before dragStart to improve client offset-calculation logic.(#1082)
  • [Patch] - Update the EnterLeaveCounter in HTML5Backend to use the configured window object. This corrects behavior in iframe environments (#1137)
  • [Patch] - Correct an error where an incorrect dropEffect was being used when in a scrolling container (#1131)
  • [Patch] - Library upgrades, documentation updates

5.0.0

4 years ago
  • Restore support for react Stateless Functional Components.
  • Audit the generic parameters for the top-level API to minimize how many clients should have to specify

4.0.5

4 years ago

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.


4.0.4

4 years ago
  • UMD builds were missing from react-dnd and react-dnd-html5-backend in 4.0.2.
  • Remove tsconfig.json from packages to prevent errors in typescript clients (#1066)
  • Remove sourcemap files from typescript compilation to prevent issues with clients using sourcemap-loader (#1060)

4.0.3

4 years ago

4.0.2

4 years ago

4.0.0

4 years ago

Breaking Changes:

  • Using new React Context API. React Peer dependency has been pinned at >= 16.3., which is when that API was released.
  • Dictionary objects have been replaced with ES6 Maps, shims may be required for older and non-compliant browsers.

Other Changes:

  • Remove dependency on @types/redux, since redux provides its own typings
  • React 17 prep - remove usage of lifecycle methods that are being deprecated
  • Replace all require()s with imports, which was causing grief for some users. This resulted in some culling of dependencies.
  • Remove isClassComponent check from 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.

3.0.2

4 years ago

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.1

4 years ago

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.


3.0.0

beta
4 years ago

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

2.6.0

4 years ago
  • New Feature: Passing Derivative Props to DragLayer to minimize render cycles (#979).
  • HTML5 Backend Firefox Fixes
    • #970 - Removes some hacks that are no longer necessary.
    • #928 - Fixes a Firefox error where react-dnd was not functioning due to event firing sequences.
  • Community documentation updates
  • Use Yarn workspaces
  • Move documentation into a sub-package

2.5.4

5 years ago
  • Fixes an issue in the DragDropContextProvider where the backend was created on every render (#859) - thanks @WearyMonkey
  • Avoids using refs with StatelessFunctionalComponents (#898) - thanks @knowbody

2.5.3

5 years ago
  • Correct SPDX license fields in the packages. The LICENSE files have always been BSD-3-Clause, but the license field was set to "MIT".
  • The peerDependency on "react" is set to "*" in the react-dnd package, but 16.x is installed for development.
  • This doesn't affect the packages, but the documentation was using some deprecated react/lib modules, and the react-hot-loader needed to be updated.

2.5.2

5 years ago
  • Add React@16 to peer-dependencies to react-dnd
  • Remove react-dnd peer-dependency from HTML5Backend
  • Improve iframe detection

2.5.1

5 years ago
  • Correct SSR bug due to addEventListener and removeEventListener methods not being available in server-mode (#813)
  • Documentation Corrections and Updates
  • Replace Yarn package manager with NPM 5.
  • Upgrade React to 15.6.1
  • Use babel-preset-env instead of babel-preset-latest

2.4.0

5 years ago

2.3.0

5 years ago

2.2.4

5 years ago
  • Includes a fix for server-side rendering with the DragDropContextProvider #672, (thanks @liors)
  • Various documentation updates
  • Add license field to child projects

2.2.3

6 years ago

Starting with this release, the packages will all be released simultaneously using the same version numbers.


2.2.0

6 years ago
  • Add DragContextProvider class, use updated dnd-core with support for injectable global context.
  • Update build to use Babel 6
  • Various documentation updates.

2.1.4

6 years ago
  • Allow React 15 as peer dependency (#423)

2.1.3

6 years ago
  • Remove the developer warning when default export is accessed (#408, #409)

2.1.2

6 years ago
  • Removes accidental console.log() in UMD builds (#385)

2.1.1

7 years ago
  • Attempts to fix a memory leak when rendering on the server (#379, #337)
  • Contains optimizations that prevent unnecessary ref reattachement in common cases (d023c63ca4df4f5bf6ef1e58f78a4a8ab7f343e0)

2.1.0

7 years ago
  • Updates to Lodash 4 (#363, fecd21fcaab2f1482d4079aed335f4482cbf9d56)
  • Handlers are now unregistered on the next tick. This should solve issues like #296, #360, and #361.
  • Drag layers now update in response to state changes (#348, #293)
  • We no longer offer UMD build under the latest branch. If you use Bower, point your config to npmcdn. For example: https://npmcdn.com/react-dnd@latest/dist/ReactDnD.min.js

2.0.2

7 years ago
  • Fixes #261 hopefully for good—the change in 2.0.1 wasn't covering all cases

2.0.1

7 years ago
  • Don't throw on undefined options when nodes are equal. Fixes #261

2.0.0

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


1.1.7

7 years ago

1.1.6

7 years ago

1.1.5

7 years ago
  • Allows all further React 0.14 betas as peerDependency

1.1.4

7 years ago

1.1.3

7 years ago
  • Add back the UMD builds to NPM and Bower (#189)

1.1.2

7 years ago
  • Bump minimum invariant dep to 2.1.0. Fixes the missing envify dependency issue for Browserify users (#182)


1.1.0

7 years ago

1.1 is a minor release focused on fixing issues with dragging native items.

If you find any issues, please report them to the bug tracker!


1.0.0

7 years ago

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


1.0.0-rc

7 years ago

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.


1.0.0-beta.0

7 years ago
Final, simpler 1.0 API

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.

Registering a drag source for a known type Before
@DragDrop(
  register =>
    register.dragSource(ItemTypes.BOX, BoxSource),

  boxSource => ({
    connectDragSource: boxSource.connect(),
    isDragging: boxSource.isDragging()
  })
)
export default class Box {
After
@DragSource(ItemTypes.BOX, boxSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))
export default class Box {
Registering a drag source for a dynamic type Before
@DragDrop(
  (register, props) =>
    register.dragSource(props.type, BoxSource),

  boxSource => ({
    connectDragSource: boxSource.connect(),
    isDragging: boxSource.isDragging()
  })
)
export default class Box {
After
@DragSource(props => props.type, boxSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))
export default class Box {
Registering a drop target for a known type Before
@DragDrop(
  register =>
    register.dropTarget(ItemTypes.BOX, BoxTarget),

  boxTarget => ({
    connectDropTarget: boxTarget.connect()
  })
)
export default class Container extends Component {
After
@DropTarget(ItemTypes.BOX, boxTarget, connect => ({
  connectDropTarget: connect.dropTarget()
}))
export default class Container extends Component {
Registering a drop target for a dynamic type Before
@DragDrop(
  (register, props) =>
    register.dropTarget(props.accepts, BoxTarget),

  boxTarget => ({
    connectDropTarget: boxTarget.connect()
  })
)
export default class Container extends Component {
After
@DropTarget(props => props.accepts, boxTarget, connect => ({
  connectDropTarget: connect.dropTarget()
}))
export default class Container extends Component {
Registering a mixed drag source and drop target Before
@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 {
After
@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.


1.0.0-alpha.2

7 years ago
  • Fix previous broken pre-release (by mistake, it contained master version instead of 1.0 branch)
  • Add warnings and errors to guard against wrong usage of the API

1.0.0-alpha.1

7 years ago
  • Fix custom drag layer crash
  • Add a workaround to make custom drag layer usable in IE11 (fixes #88)
  • Add a nested targets example

140 Versions

TagPublished
16.0.1latest4mos ago
16.0.04mos ago
15.1.25mos ago
15.1.16mos ago
15.1.06mos ago
15.0.26mos ago
15.0.16mos ago
15.0.06mos ago
14.0.58mos ago
14.0.41yr ago
14.0.31yr ago
14.0.21yr ago
14.0.11yr ago
14.0.01yr ago
13.1.11yr ago
13.1.01yr ago
13.0.11yr ago
13.0.01yr ago
12.0.01yr ago
11.1.32yrs ago
11.1.12yrs ago
11.1.02yrs ago
11.0.02yrs ago
10.0.23yrs ago
10.0.13yrs ago
10.0.03yrs ago
9.5.13yrs ago
9.5.03yrs ago
9.4.03yrs ago
9.3.43yrs ago
9.3.23yrs ago
9.3.13yrs ago
9.2.13yrs ago
9.1.03yrs ago
9.0.13yrs ago
9.0.03yrs ago
8.0.33yrs ago
7.7.03yrs ago
8.0.23yrs ago
8.0.03yrs ago
7.6.13yrs ago
7.6.03yrs ago
7.5.03yrs ago
7.4.53yrs ago
7.4.43yrs ago
7.4.33yrs ago
7.4.23yrs ago
7.4.13yrs ago
7.4.03yrs ago
7.3.23yrs ago
7.3.13yrs ago
7.3.03yrs ago
7.2.13yrs ago
7.2.03yrs ago
7.1.03yrs ago
7.0.24yrs ago
7.0.14yrs ago
7.0.04yrs ago
6.0.04yrs ago
5.0.04yrs ago
4.0.54yrs ago
4.0.44yrs ago
4.0.34yrs ago
4.0.24yrs ago
4.0.04yrs ago
3.0.24yrs ago
3.0.14yrs ago
3.0.0beta4yrs ago
2.6.04yrs ago
2.5.45yrs ago
2.5.35yrs ago
2.5.25yrs ago
2.5.15yrs ago
2.4.05yrs ago
2.3.05yrs ago
2.2.45yrs ago
2.2.36yrs ago
2.2.06yrs ago
2.1.46yrs ago
2.1.36yrs ago
2.1.26yrs ago
2.1.17yrs ago
2.1.07yrs ago
2.0.27yrs ago
2.0.17yrs ago
2.0.07yrs ago
1.1.87yrs ago
1.1.77yrs ago
1.1.67yrs ago
1.1.57yrs ago
1.1.47yrs ago
1.1.37yrs ago
1.1.27yrs ago
1.1.17yrs ago
1.1.07yrs ago
1.0.07yrs ago
1.0.0-rc7yrs ago
1.0.0-beta.07yrs ago
1.0.0-alpha.27yrs ago
1.0.0-alpha.17yrs ago