React-dnd: Who uses React DnD?

• Project: https://github.com/WikiEducationFoundation/WikiEduDashboard
• Usefulness: Very
• Issues: State-driven animations were the hardest part. I ended up with a combination of react-motion and react css transition groups. Then I had to manage extra state for things that were mid-animation to prevent them from being drop targets while animating. I ended up using https://github.com/yahoo/react-dnd-touch-backend, which had it's own issues (text being selected during drag) but was more controllable _during_ animations. I probably spent ~4 work days on this feature and getting the animations right, which probably would have taken considerably less time in a non-react app.

_- What products are you using React DnD in?_

I'm using it on various apps (Kanban board, line of business applications)

_- How useful do you find it?_

Before React DnD, I've tried all the DnD solutions I could find, both react and jquery based, and React DnD comes out miles ahead.

_- How often do you have issues with it, and how frustrating are they?_

Since 1.0, I haven't encountered any issues. Worth noting that I'm only supporting modern browsers on my products.

_- Which features do you care about?_

I'm using all of the features, in different combinations in different areas.

_- Can you attach a couple of screenshots of your product?_

I just integrated it yesterday with a private project (I can't give screens right now, sorry), and I found the existing documentation superb. The approach is clean, easy to understand, simple to augment, and overall friendly.

I haven't really encountered any issues with the kit, honestly. I think its simplicity really is the biggest feature, plus it encourages folks who use it to steer towards best practices like HOCs.

What products are you using React DnD in?

We use it in our new web console at Treasure Data. I've also used it for personal projects.

How useful do you find it?

Very useful. It's easily the best drag and drop lib I've used. I'm very confident that it can be used to implement sophisticated drag and drop interactions with ease.

How often do you have issues with it, and how frustrating are they?

Every time I use the library, it takes me a while to remember how it all comes together: where each part goes and what it does. This happens even after having used it multiple times.

Perhaps having a visualization to shows all the parts would make it easier to remember.

Overall, it seems like the library does everything I need it to do.

Which features do you care about?

Testability! My previous experiences with drag and drop were rather poor, and nobody tested their drag and drop related code.

I haven't done any kind of mobile support, but I don't know how I'd target both desktop and mobile.

I've seen react-dnd-touch-backend, but I don't know how I'd mix both.

Can you attach a couple of screenshots of your product?

https://gfycat.com/ScientificEvilAmericanbadger

This is basically just me playing around. react-dnd makes it trivial to implement the file drop zone.

What products are you using React DnD in?

codecks.io still in development but close to early-access

How useful do you find it?

A lot. Normalising browser behaviour and offering a react approach to dnd make this library a no brainer for me

How often do you have issues with it, and how frustrating are they?

Documentation is great, but when starting working with it, I ran into surprising issues where it didn't work without error messages, I couldn't reproduce it reliably but probably had to do with zero-height drag targets.

Which features do you care about?

Browser normalisation, support for touch interactions

Can you attach a couple of screenshots of your product?

https://gfycat.com/CleanLegitimateAracari

I have used React DnD in my PhD work on a search engine for medical imaging archives. It allows me to drag search results to become part of the query (yielding similar images). Had there been no library like this, I would have had to mess around with the HTML5 API and make sure it works well alongside React. Anything that lets me focus on more important matters is gold!

I've had no serious issues, but the transition from 0.x to 1.x was very confusing and a good example where dist tags were not used properly (1.0.0-rc was released as latest without updated documentation). This is all water under the bridge, anyway. :)

1.0.0-rc was released as latest without updated documentation

Yeah, this was before I learned how dist-tags work. :joy:

What products are you using React DnD in?

Using it for a client project that has a lot of drag and drop interaction. Some of the notable components are:

• A tree view where you can sort and nest nodes
• A list/card view similar to Trello, only supports sorting.

It's also a collaboration tool so most of the interface updates are dispatched to a socket server.

How useful do you find it?

Very useful, it's very easy to separate the dragging logic from your component and test it individually.

How often do you have issues with it, and how frustrating are they?

We face a lot of problems with the tree view that supports nesting and sorting,

One of the bigger issues we experienced was implementing the tree view that supports nesting and sorting.

We have different types of nodes (folders, lists). A user can either drop a something on a folder which will cause it to nest or sort it below or above another node. This interaction comes with a lot of flickering, some buggy behavior and occasionally a decrease in performance. See this video: http://s.2to1.be/fAtX,

The way it works is as followed:

1. User starts dragging a node, the node stays in it's position
2. User hovers over a node -> display an indicator of the new position, the position of this is dispatched with a redux action. (the entire tree is part of the application state).
3. User ends the drag which dispatches an action that persists the new position of the node on the server and transmits it to all connected socket clients.

Currently we use some math (a variation on the sortable example in this repo) to calculate wether or not a node is on or below/above a folder. Initially I tried to make the Folder component a DropTarget but that didn't work cause then I was unable to sort the other Node DropTarget

Which features do you care about?

• Testability
• Switching out backends
• Hooking into events
• Browser support

Can you attach a couple of screenshots of your product?

See the video above

I just added react-dnd last week to a (yet to be released) education web app. It is amazing! Thanks so much for your work!

The biggest win IMO is that react-dnd provides just the right level of abstraction for managing DnD functionality across the whole app.

Besides being able to ditch the awkward combination of isolated, one-size-fits-all drag components (sortable, etc.), I was able to add some drag based functionality in a matter of hours that I had previously written off as too complicated to be worth it (for example, dragging a card to re-sort within its list OR onto a user list icon to show a user list, then dropping it onto the appropriate user).

The only issue I've run into so far was in the touch backend, but I was able to make a quick hack to move forward and someone commented they are working on a more general pull request.

The main feature I care about given the already wonderful API is solid touch support.

Speaking personally of why I don't make pull requests for open source projects (so far, anyway)...I'm a designer. Though I use this tool, for example, my head is naturally thinking about very different kinds of problems. Besides simply not being good at solving issues that arise in libraries like this, it's really not the kind of work I normally do and I wouldn't "trust" my solution. I know there's some amount of selfishness here, but I imagine there's more than a few designers who also happen to code in front-end development who act this way. I'm very grateful for people like you who are willing to help out designers like me with tools that bring the complexities of app development into closer alignment with the complexities of product design so that moving between the domains is less jarring.

FYI, I'm using react-dnd in combination with react-flip-move for animating layout changes. It's just been a few days, but they seem to pair great together.

@arstin

This totally made my day. :heart:

_What products are you using React DnD in?_
Product is still under wraps.

_How useful do you find it?_
Very useful, we have a lot of drag and drop types. Keeping the DnD logic within the components has helped our brains manage all the complexity.

_How often do you have issues with it, and how frustrating are they?_
We have some issues with performance due the sheer volume of drop targets we register. Otherwise it works great!

_Which features do you care about?_
Performance and SVG compatibility.

Can you attach a couple of screenshots of your product?
Not in full, but this will give you an idea of the problem we're trying to solve with React-DnD.

The application functions like a strategy game map editor. You can drag and drop new items onto the map based on a number of rules and move items around the map as well. We are not building an online game, instead using some of the ideas to solve other mapping problems (again, I'm not able to mention yet).

Thanks very, very much for a great library!

This is a life saver if you're using react and have to do dnd stuff. Great work!

I use React DND in our transport management software. so far I had no issues at all.

the user drags the delivery stops around and sees them directly on a map with the calculated distances.

What products are you using React DnD in?

Drag-and-Dropy block-based CMS (yet another internal beta, launching for a client in April)

How useful do you find it?

Immensely. Though the API isn't _exactly_ as straight-forward as some other 3rd-party components, its super powerful and really lets you do whatever you need.

How often do you have issues with it, and how frustrating are they?

Rarely and not very frustrating.

Which features do you care about?

Stability and cross-browser bullet-proofness.

Can you attach a couple of screenshots of your product?

What products are you using React DnD in?

We use React DnD in the Asana web application, for all places where we use drag-and-drop. Note that, we're currently rewriting our application from our in-house Luna framework to React, and are using React DnD during the re-write in all places where we use drag-and-drop.

How useful do you find it?

We have found it very useful. The API is easy to work with, and allows us to have clear separation of concerns by keeping drag-and-drop contained within a few components.

How often do you have issues with it, and how frustrating are they?

Other than initial ramp-up, we do not often have issues with it. We use React DnD with TypeScript, and I think writing out the type definitions reduced the ramp-up period for us (since we had to explore the entire API in the process). Now, our issues are generally around testing (e.g. cleanup between tests, in-house helpers to work with the dnd-decorated components, and so on). This is sometimes frustrating, but less so now that we have some general-use components to use or example components to base future ones off of.

Which features do you care about?

Performance, separation of concerns, testability

Can you attach a couple of screenshots of your product?

@epelz You should probably get asana to sponsor it otherwise the project is going to slow down

either https://github.com/Asana or https://github.com/FogCreek, who make Trello which def uses react-dnd, might be great sponsors.

@gaearon better yet have facebook sponsor it

What products are you using React DnD in?

The next generation of our UI.

How useful do you find it?

Extremely! I like the docs but it could use more real world examples.

How often do you have issues with it, and how frustrating are they?

Just encountered an issue when decorating a component with DragSource which is preventing the componentWillUpdate method from executing when props change. Super frustrating so I guess I should file a bug. I'm guessing it's me and not you though. ;)

Which features do you care about?

Performance, stability and touch support.

Can you attach a couple of screenshots of your product?

Not yet, I'm afraid but think lists with reordering and dragging stuff into them from new lists. Quite simple compared to the other examples here.

What products are you using React DnD in?

We at @teleport use React DnD in our Zen (moving checklist) product for reordering and categorizing the tasks.

Also, we just built a reusable tree view component react-dnd-treeview with DnD support implemented using React DnD for use in a currently-internal project. We used react-ui-tree at first but couldn't get the UX right, and we had a positive experience with React DnD, so we implemented our own. The component is in really early stages, so there is no documentation, CI, etc. yet but any feedback would be welcome!

How useful do you find it?

While it took some time to understand the model, the design is really clean and we've pretty much decided to use it everywhere we'd need DnD. So, very useful.

How often do you have issues with it, and how frustrating are they?

So far we've had 2 issues:

• getting the drag UX right with touch backend (including performance)
• initially I tried implementing the drop area logic in JS but got stuck with not being able to get the right target-relative coordinates (for determining whether to drop above or below the target) out of React DnD, eventually decided to create separate overlaying DOM elements as the drop targets.

Which features do you care about?

Performance, hiding the quirks of the underlying browsers/platforms.

Can you attach a couple of screenshots of your product?

Teleport Zen:

react-dnd-treeview:

.

What products are you using React DnD in?
Discord - https://discordapp.com - A voice and text chat for gamers

How useful do you find it?
Very!

How often do you have issues with it, and how frustrating are they?
Infrequently, 5/10 frustrating.

Which features do you care about?
All the current functionality.

We very nearly used react-dnd for the Slack desktop client, but unfortunately ran into two limitations that turned out to be dealbreakers:

1. It's not possible to customize the dragging logic (ie. the logic that computes drag state, like when a drag is in progress).
   
   
   
   • It's super easy to change components in response to the changing props injected from the dragging state. It's also fairly straightforward to customize the drag preview with a custom React component. But unfortunately, data you attach to the drag operation can only attach to and follow the cursor around. This precludes a user experience like we currently have with our sidebar, where you can drag team icons around to reorder them, and those drags are constrained to the y-axis only. With react-dnd, you can easily constrain a drag preview to one axis, but it's impossible to constrain the data attached to the cursor as you drag. This means that if you move the cursor away from the sidebar horizontally, but the cursor is still vertically "over" a drop target, react-dnd won't let the drop target respond at all. (see GIF below for the behavior we currently have without react-dnd 👇 )
     
     
   
   
2. Using a custom drag layer blocks the regular React render loop if you're doing things on hover. Since you have to create an extra React component if you want a custom drag layer, and that drag layer works by changing its position in response to props changes from the dnd monitors, render() ends up getting called _a lot_. This is only an issue if you're planning on re-rendering any other components (most likely other drop targets) on hover as you drag your DragSource around. We managed to mitigate this somewhat by changing state on hover asynchronously and returning early on hover if the drop target hadn't changed, but there was still noticeable lag when changing drop targets while hovering.

Hopefully that feedback's helpful! I did enjoy working with react-dnd while I was looking into possibly using it in the Slack app, and I'd love to see it overcome these limitations if at all possible.

What products are you using React DnD in?

We use it in tylio, a new way to create web pages. React-dnd is front and center on the page where you upload your content.

 How useful do you find it?

Very useful; It's a bit hard to wrap your head around it at first, as you need to understand all the moving parts at once, but once it clicks you're good to go.

How often do you have issues with it, and how frustrating are they?

Our case is quite complex, as we're reordering and moving items of different sizes around, and we don't want them to flip-flop around. I had some issues with it, but I guess it was more with how to use it than the library itself.

Which features do you care about?

Pretty much all of them! We use different types of drag sources and drop targets, native files / urls / text, HTML5 & touch backend with custom drag layer.

Can you attach a couple of screenshots of your product?

If anybody use it with Typescript, could you provide a basic example? I stuck with this error:

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

I use it in this way:

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

I dunno if it's too late to chime in, but I wanted to give some (hopefully constructive) feedback.

I found React-DnD to be somewhat difficult to grasp (and implement). It has many moving parts and setup is quite involved. I was hoping to have something that's more "plug-n-play." And maybe this is because it tries to be many different things (drag/drop targets, list re-ordering, etc). But I wound up taking a different approach, which was basically just putting up/down buttons on each item and re-ordering that way, combined with react-flip-move to animate the movement.

I'd love to see a fork of this that focuses solely on list re-ordering, and keeps it _super_ simple to get it working.

We're starting to use it on a large-scale proprietary product that is built using React and Redux. We use react-dnd to manage the drag and drop aspects of all things except for SVG elements in the app. It has just the right abstraction layer. In fact, we have something very similar in-house for code that predates React and it is backed by mouse events.

The one thing I wish react-dnd has is a backend that's based on mouse events so it works for SVG elements as well.

Btw, I'm in the process of writing a flowtype definition for it based on its TypeScript definition, as the existing one on flow-typed is incomplete.

Wow, lots of input! This is a lot of data to go through! I'm going to close this issue out. Thanks to everyone for taking the time to submit comments!

I'm planning on updating some of the documentation in the next few weeks, and one of my thoughts is to create a showcase for projects and applications using React DND. I'll create a follow-up issue to capture those projects when I get around to taking ont he project!

💜

@mnquintana Very interesting feedback- did you and the team end up using another drag and drop library or just build something completely from scratch?

@mnquintana would be really awesome to learn what you did to overcome this, or better yet, have slack release their dnd library!

@epelz Need your help. Have you created a reusable drag and drop component to drag the cards in the dashboard and the items in the list or using separate component for cards and list. I would really appreciate if you can reply.

I know this is a pretty old discussion thread but wanted to contribute anyways. Evernote
🐘 uses react-dnd right now for our new Spaces product for business! We've learned a lot and might try to share what we've learned if people are interested :)

What products are you using React DnD in?
https://evernote.com/business

How useful do you find it?
Very useful! It was a steep learning curve but we got it to do most of what we want to do.

How often do you have issues with it, and how frustrating are they?
I feel there are some big barriers for first starters and some things are interesting to handle. Some bugs regarding hover and drop effects got us pretty confused but looking more into it, it does seem some of them are just limitations with HTML5's Drag/Drop native implementation (drop effects specifically seem to override the cursor you want to apply so we can't take advantage of things like cursor: no-drop. It's really smart you made it so you can implement your own backends if necessary and we haven't ventured in experimenting with the touch backend yet.

We did have an interesting time hooking into permissions. Our drag and drop for notes requires a lot of things to know whether we can move and/or drop something. We also found we had to reimplement the native fade-out-drag-back to the main DOM element when it didn't find a place to drop ourselves in our CustomDragLayer (this might be an example we can contribute).

Which features do you care about?
We are looking to implement multiple drag-and-drop and it doesn't look like there's a clean way to do it with React-Dnd from what we know? We are looking more into it though. When we dive deeper we'll share more.

@augbog not sure if you've tried it, but have you looked into gaeron's implementation in the first post in issue #14 and using a custom drag layer?

In a way, this scenario is already possible: consumers can manually keep track of selected elements, set dragPreview to some kind of generic placeholder Image and react appropriately to the dropping of (as far as business logic is concerned) several elements.

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

Thanks @JM-Mendez yeah we saw that and we were concerned about the follow up comment regarding having multiple components being aware they were being dragged but after rereading it, it actually may not affect us so we're still looking into it :) Thanks for the call out on that!

Still no backend for cross iframe DnD or parent window to child iframe draggability. @gaearon I saw your comment regarding this issue on a few threads, I would like to say that this is the only reason I had to use pure js solution for my project.

(Edit) I think this is a really useful feature for anyone trying to build drag and drop page builder.